CSS positioning is powerful, but there are a handful of basic concepts that must be understood before its power can be leveraged. The four most important position values are:
static– this is the default position value. It means that the element renders in order, as it appears in the document flow, and its position is determined by the browser and/or by HTML rendering conventions.
fixed– the element is positioned relative to the browser window.
relative– the element is positioned relative to where it would have been. In other words, if normal rendering would position the element at
left=120, top=300and you specify
position: relative; left: 10; top: 20, the element’s position will be offset by these values and it’ll be drawn starting at
absolute– the element is positioned relative to its containing element, but – and here’s the thing that trips up a lot of people – only if the containing element’s position is not static. If the containing element is static, the browser looks to the next element up. If that element is static, the browser keeps going up and up until it finds a non-static positioned element. If it doesn’t find one, the element is positioned relative to the browser window. In other words, if all of the parent elements have the default static positioning, absolute positioning is the same as fixed positioning.
The next sections go into depth with the four position values.
This is the default. It means to place the element where the browser would have placed it anyway. It’s rare to specify an element as position: static, but I’ll explain an exception shortly. Here’s an example of static positioning for a div; you’ll see in this case that it doesn’t affect where the div is rendered:
Static positioningHere is the static-positioned div
With static positioning, the top and left values in the div style are ignored; that’s because static positioning means put the element where the browser would have put it anyway.
OK, so why would you ever specify an element as position: static? Only in one special case: if the element’s position is fixed or relative or absolute and you want to revert it to its default position.
Fixed positioning is straightforward: an element is placed at exact coordinates within the browser window, even if there’s already another element there. The order of the elements doesn’t determine their placement; the coordinates do:
Fixed positioningThe first itemThe second itemThe third item
With fixed positioning, the elements are placed relative to the browser window. Some interesting effects to note:
- The first item is positioned by its top/right coordinates and it "floats" down and right. It ends up on top of the paragraph that says Fixed positioning, which is the expected behavior: the paragraph is positioned statically (by its order in the HTML code), and the first div is placed by coordinates. If they overlap, so be it.
- The second item is positioned by its top/right coordinates, just like the first.
- The third item is positioned by its bottom/right coordinates, so it offsets from the bottom right of the screen. To anchor to the bottom left, specify
position: fixed; bottom: 0; left: 0. To anchor to the top right, specify
position: fixed; top: 0; right: 0.
Relative positioning offsets an element from where it would normally render. An example is best here:
Relative positioningThe base element1: No positioning
The base element2: Relative left 10 top -3
The base element3: Relative left 12 top 20
The base element4 Relative right -5 bottom 10
- 1: No positioning
divdoesn’t have any positioning directives, so it renders as part of the normal flow, after the
divthat precedes it.
- 2: Relative left 10 top -3
div‘s styling is
position: relative; left: 10; top: -3;, so its left offset is 10 pixels from where it would normally be placed. Its top offset is -3 pixels from where it would normally be placed, which is why it creeps up into the
divthat precedes it.
- 3: Relative left 12 top 20
div‘s left position is 12 pixels from where it would normally be, and its top position is 20 pixels from where it would normally be. Its top position is shifted down so far that it overlays the
divthat follows it, which is expected. Also note that the
divwhich follows it doesn’t have any positioning directives, so it was placed where it would normally go in the flow of the document; it’s not pushed down by the previous
- 4: Relative right -5 bottom 10
div‘s offset is specified from its bottom/right corner instead of its top/left. Relative offsetting by bottom/right will give the same result as offsetting by top/left, so most designers stick with top/left.
Absolute positioning offsets an element from the first parent element whose position is not
static – in other words, the first parent element that uses
absolute positioning. If the parent’s positioning is
static, the browser searches upward to the first non-
static parent. If there isn’t a non-
static parent, the element is placed relative to the browser window, as though its positioning were
This first example has an element with
absolute positioning, but both of its parent elements are
static so the element is positioned relative to the browser window:
First Relative Positioning Attempt1: no positioning2: no positioning3: absolute left 0 top 0
In the second example, the only difference is the
secondElement style, which defines the position as
position: relative; left: 0; top: 0;. This doesn’t change the second
div‘s position at all, but because it’s now non-
static it can be used as an offset for its child element:
Second Relative Positioning Attempt1: no positioning2: relative left 0 top 03: absolute left 100 top 5