CSS Positioning Models Comparison

Static positioning is just a fancy name for the normal flow, the default model used for positioning. Think of static positioning as the way elements normally flow on a page in the absence of any CSS positioning.

Usually, the only reason to specify static positioning is to override other previously set positioning.

Element is first positioned in the normal flow, then offset from the normal flow. In other words, a relatively positioned element is shifted from where it would have normally been if not positioned.

Surrounding elements stay where they are in the normal flow and are not shifted, which may result in elements overlapping.

Element is removed from the normal flow and positioned offset from its closest positioned ancestor (one that has been relatively or absolutely positioned). If there is no positioned ancestor, the element is positioned offset from the viewport (the browser window).

Surrounding elements will shift to take up the space where the absolutely positioned element used to be, because it has been removed from the normal flow.

Element is positioned offset from the viewport (the browser window).

A fixed element, unlike all other elements, does not move when the page scrolls.

A fixed element will print in that location when your Web page is printed. For example, if the element is fixed at the bottom of a page, it will appear at the bottom of every printed page.

div {
position: static;
}

div {
position: relative;
top: 10px;
left: 10px;
}

div {
position: absolute;
top: 10px;
left: 10px;
}

div {
position: fixed;
top: 10px;
left: 10px;
}

Good support in modern browsers.

Good support in modern browsers.

Good support in modern browsers.

No support: IE6, NS6.

IE7 and IE8 support fixed positioning only if a DocType is specified.