position (CSS property)
Example
This style rule makes the element
with ID "sidebar" absolutely positioned at the top
right-hand corner of its containing block:
#sidebar {
position: absolute;
top: 0;
right: 0;
}
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
absoluteThe value
absolutegenerates an absolutely positioned box that’s positioned relative to its containing block. The position can be specified using one or more of the propertiestop,right,bottom, andleft. 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.fixedThe value
fixedgenerates 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 propertiestop,right,bottom, andleft. In the print media type, the element is rendered on every page.relativeThe value
relativegenerates 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 propertiestoporbottomand/orleftorright. 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.staticThe value
staticgenerates a box that isn’t positioned, but occurs in the normal flow. The propertiestop,right,bottom,left, andz-indexare ignored for static boxes.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
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-indexisauto - 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.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

