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.

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.