position (CSS property)

Spec
Inherited Initial Version
No static CSS2
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Buggy Buggy Buggy

Syntax

position: { absolute | fixed | relative | static | inherit } ;

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.

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;
}

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 Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Full Full Full Full Full Full Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy

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).

User-contributed notes

ID:
#9
Contributed:
by Rayzur
Date:
Tue, 27 Jul 2010 22:36:02 GMT

Re #7 By Paul O'B.

The bug that Paul mentioned is present when using Embedded CSS in the <head> element, it is not present when using an external linked stylesheet. Older versions of Firefox have a similar problem when using display:table;

To fix the bug when using embedded CSS just use an empty javascript element in the <head> before the <style> element.

<script type="text/javascript">
//fix for opera 10.60 position:fixed; bug
</script>

<style type="text/css">

The empty js element is the same fix for "fouc" so the browser does something else first and then looks at the css when it's finished and gets it right.

ID:
#7
Contributed:
by Paul O'B
Date:
Sun, 25 Jul 2010 09:16:14 GMT

In opera 10.6 a fixed positioned element will disappear if the page is refreshed after the content has been scrolled. Opera 9 versions so not have this bug.

Haven't found a fix yet.

ID:
#4
Contributed:
by Paul O'B
Date:
Mon, 25 May 2009 09:40:35 GMT

Re #3 By Wardrop.

The code you supplied is working the same in IE7 and Firefox.

If you remove the z-index from container and container2 then your demonstration will work.

.container {
position: absolute;
left: 50px;
top: 50px;
right: 0px;
height: 100px;
background: purple;
}
.container2 {
position: absolute;
left: 50px;
top: 150px;
right: 0px;
height: 500px;
background: blue;
}

This bug is already documented above and is due to IE7 and under creating a new stacking context for all positioned elements and applying a default z-index of zero instead of auto.

The code won't work in iE6 because you have specified the width using left and right co-ordinates which IE6 doesn't understand and you would need to add a width or add a child element that is in "haslayout" mode.

ID:
#3
Contributed:
by Wardrop
Date:
Thu, 05 Feb 2009 01:36:19 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

There's another bug in IE7 I found which I think would be worth mentioning in the above article. It's a little difficult to explain, so I'll use an example.

If I have two container divs on a page, both are absolutely positioned, one below the other (not overlapping though). If I put a div (we'll call it "child") in the top container div, and set the child's z-index to 100 (as an example), and give it a height property that should cause it to overlap the other/second container div, it won't. This works in all other browsers though, and goes against the CSS specification.

Here's some code to try yourself...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
html, body {
padding: 0;
margin: 0;
}
.container {
position: absolute;
left: 50px;
top: 50px;
right: 0px;
height: 100px;
background: purple;
z-index: 2;
}
.container2 {
position: absolute;
left: 50px;
top: 150px;
right: 0px;
height: 500px;
background: blue;
z-index: 1;
}
.flyout {
position: absolute;
left: 100px;
top: 0px;
width: 100px;
height: 250px;
background: orange;
z-index: 100;
}
</style>
</head>
<body>
<div class="container">
<div class="flyout"></div>
</div>
<div class="container2"></div>
</body>
</html>

Sorry for the length of this comment. Feel free to remove it (or just the code) after reading it.

Related Products