Position: Relative; What is It Good For?

Position: Relative; What is It Good For?

This post will take 2 minutes to read.

There are four potential values for the position property (ignoring inherit) which are static, relative, absolute, and fixed. Now, while this article will be focusing on the relative value, it is important to understand some key bits of information about the other values:

  • Static positioning (the default value) is actually a lack of positioning.
  • Absolute or fixed positioning removes the element from the flow of the document.
  • Absolutely positioned elements are positioned relative to nearest positioned ancestor element.

Right, now that you have wrapped your head around that, let’s talk about the uses for relative positioning. There are three main instances where it comes in handy:

  1. When you want to move an element (while keeping it in the flow of the document, but without disturbing any other elements).
  2. When you want to define a containing box for absolutely positioned descendant elements.
  3. When you need an element to have positioning so that you can use z-index.

Moving an element

Elements are naturally rendered in the flow of the document, and as such, they interact (i.e. they affect the position of each other). This is generally a good thing, as most of the elements on your page have a relationship with the elements around them. For instance, a footer being pushed down by your main content.

Sometimes though, you want to move an element without it affecting any of the elements around it. This is where position: relative; comes in handy. When using relative positioning with the top, right, bottom, or left properties, it is only the generated box that is actually shifted; the element still remains where it was in the flow of the document. Keep in mind that this can often result in overlapping elements.

Also, it is important to remember that the top, right, bottom, and left properties can’t change the size of a relatively positioned element (they can if the element is absolutely positioned).

Containing absolute descendants

When positioning an element absolutely—as it is removed from the flow of the document—the top, right, bottom, and left properties don’t act as they would on a relatively positioned element. These properties are now based on the nearest positioned ancestor (or the root element, if there are none). This means that if you are giving an element a position of absolute and you want to confine it to a certain ancestor, setting position: relative; on that ancestor will do the trick without affecting the flow of that element.

How relative positioning sets a context for absolute descendants

The terminology is a little tricky here as an element with position: static; appears as though it has a position set, but as static positioning is in fact no positioning at all, static elements can’t be containing boxes for absolute elements.

Using z-index

Lastly, z-index is only respected on elements that have a position set. So if you don’t want to remove an element from the flow of the document, but want to use z-index, relative positioning is your friend.

Tweet this

3 Comments

  1. Jack Rugile

    Nice writeup, the whole positioning concept confused me for so long when I started with CSS. It still bugs me that certain things aren’t broken up more. For example, if you want to adjust an element’s position (top, bottom, left, right) and have z-index apply, then you use position: relative, but then that element is forced to be the containing element, which might not be what you want. I’ve run into that situation a lot. I just wish the control was more granular.

    I also wonder if there is any reason not to have top, bottom, left, an right and z-index apply to static elements. If you want static elements to behave as they do now… just don’t use those properties, but if you do, then use them. Chris Coyier talked about this a little bit here: http://css-tricks.com/what-if-there-was-no-position-static/

  2. Nathaniel Higgins

    You also need to keep in my position “sticky”, which already exists in Chrome Canary and, if I remember correctly, is coming to other vendors soon. It acts like a mix between relative & fixed, as in, it’s relative while the element is in viewport, but scrolls with the viewport once it isn’t,