The CSS position property

This article was first published on YUI Blog (12-14-2010).

This property applies to all elements. It has five possible values:

position:static

From section 9 Visual formatting model:

The box is a normal box, laid out according to the normal flow. The top, right, bottom, and left properties do not apply.
http://www.w3.org/TR/CSS21/visuren.html#normal-flow

Things to notice in this demo

Demo

Things to remember about position static

position:relative

From section 9 Visual formatting model:

The box’s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.
http://www.w3.org/TR/CSS21/visuren.html#relative-positioning

Things to notice in this next demo

Demo

Things to remember about position relative

position:absolute

From section 9 Visual formatting model:

The box’s position (and possibly size) is specified with the top, right, bottom, and left properties. These properties specify offsets with respect to the box’s containing block. A absolutely positioned box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.
http://www.w3.org/TR/CSS21/visuren.html#absolutely-positioned

Things to notice in this new demo

Demo

Things to remember about position absolute

Most important thing to remember

Because this positioning scheme removes boxes from the flow, it is considered bad pratice to use it for layout.

position:fixed

From section 9 Visual formatting model:

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images. For paged media (where the content of the document is split into one or more discrete pages), boxes with fixed positions are repeated on every page. This is useful for placing, for instance, a signature at the bottom of each page. Boxes with fixed position that are larger than the page area are clipped. Parts of the fixed position box that are not visible in the initial containing block will not print.
http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning

Things to notice in this demo:

Things to remember:

@media print {
      #logo {position: static;}
    }

position:inherit

If position:inherit is specified for a given box, then it will take the same computed value as the property for the box’s parent.

Note: IE 6 and 7 do not support this keyword except when used with direction and visibility (see the CSS Property Value inherit).

Things to consider

Box offsets

Be aware that for absolutely and fixed positioned boxes, values set in percentage for top, right, bottom, and left are computed according to the dimensions of the containing block (which may not be the parent box).

“position” and “overflow”

A box styled with overflow:hidden will clip relatively positioned elements (nested boxes), but it will not always hide absolutely positioned ones. This is because the parent box is not always the containing block (the nearest ancestor with a “position” of “absolute”, “relative” or “fixed”).

In short, this means absolutely positioned elements will show outside of a box styled with overflow:hidden unless their containing block is the box itself or an element inside the said box. This demo page shows how things work.

Margins

Authors can use margins on elements regardless of their positioning scheme.

The case of IE

In IE, “positioning” a box may be a blessing or a curse:

Stacking order and stacking level

Mobile Devices

Read PPK’s article, the fifth position value (should be the sixth though), to find out why mobile browser vendors cannot really support position:fixed.</p>

Further readings

A “ghost” analogy:

An element with position relative is always offset relative to its normal position in the flow. In other words, it is shifted relative to where it would be under normal circumstances, and shifting it doesn’t affect the layout of elements around it. It’s like a ghost that has left its body behind. A body that has width and height and affects its surroundings but is invisible. The ghostly box is able to move but is still connected to the old body in that its position is still measured from it. Now an element with position absolute is even easier. It no longer affects its surroundings at all (it’s pulled out of the layout flow). It’s now a true ghost with no body left behind. As far as its sibling elements are concerned it’s as if it no longer exists. To get its position, look through each of its parent elements until you find one with either position: relative, [position: fixed,] or position: absolute. That element will serve as the reference point. Only if you don’t find a “positioned” element will it be offset from the document.
http://www.alistapart.com/comments/css-positioning-101/P32/#33