Description

The position property, together with the float property, controls the way in which the position of the element’s generated box is computed. See Positioning for details about element positioning.

Boxes with a position value other than static are said to be positioned. Their vertical placement in the stacking context is determined by the z-index property.

Value

absolute

The value absolute generates an absolutely positioned box that’s positioned relative to its containing block. The position can be specified using one or more of the properties top, right, bottom, and left. Absolutely positioned boxes are removed from the flow and have no effect on later siblings. Margins on absolutely positioned boxes never collapse with margins on other boxes.

fixed

The value fixed generates an absolutely positioned box that’s positioned relative to the initial containing block (normally the viewport). The position can be specified using one or more of the properties top, right, bottom, and left. In the print media type, the element is rendered on every page.

relative

The value relative generates a positioned box whose position is first computed as for the normal flow. The generated box is then offset from this position according to the properties top or bottom and/or left or right. The position of the following box is computed as if the relatively positioned box occupied the position that was computed before the box was offset. This value cannot be used for table cells, columns, column groups, rows, row groups, or captions.

static

The value static generates a box that isn’t positioned, but occurs in the normal flow. The properties top, right, bottom, left, and z-index are ignored for static boxes.

inherit

The value inherit causes the element to take the same computed value as its parent (see The CSS Property Value inherit) for more information.

Compatibility

Internet Explorer for Windows versions up to and including 6 don’t support the value fixed.

Internet Explorer for Windows versions up to and including 6 have problems with margin calculations for absolutely positioned boxes. Percentages for dimensions are computed relative to the parent block, rather than the containing block. Consider this example:

<div id="containing">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>

#containing {
  position: relative;
  width: 200px;
  height:200px;
}
#parent {
  width: 100px;
  height: 100px;
}
#child {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50%;
  height: 50%;
}

Here, the element with ID "child" is absolutely positioned, and therefore its containing block is the one generated by the element with the (convenient) ID "containing"—the "child" element’s nearest positioned ancestor. IE6 and earlier versions will make the "child" element 50 pixels square—50% of the element with the ID "parent"—instead of the expected 100 pixels, since they base the calculation on the dimensions of the parent block rather than the containing block.

Internet Explorer versions up to and including 7:

• always generate a new stacking context for positioned boxes, even if z-index is auto
• don’t support the value inherit

In Internet Explorer for Windows versions up to and including 7, a position value of absolute will cause an element to gain a layout, as will a value of fixed in version 7.

Safari versions less than 4.0 will not move an element when using a value of relative while using top or bottom when percentage measurements are used, and when the parent’s height is expressed in percentage (or using a value of auto).

Opera up to including version 10 will take into account the parent’s border-width when calculating percentage values for top and bottom when using relative positioning. Other browsers (apart from Safari as mentioned above) move the element based on the parent’s height only (i.e. the content edge of the containing block).

Safari (up to and including version 4) and Chrome 2 have a minor bug with positioning in dynamic environments and the element become mis-positioned (source quirksmode.org).