Back to the index.
In IE7, if you select "absolute" or "fixed" and then "relative", most of the layer’s content doesn’t show.
In WebKit-based browsers, if you select "relative" and then "static", the green layer is misplaced.
Neither of these bugs matter a lot in any practical context.
The position declaration lets you declare what the position of an element should be.
position: fixed on mobile devices is a special case; see the viewport page for more details.
Test position by changing its value for the test element.
top: 100px; left: 100px; padding: 1em; border: 1px solid #cc0000;
position takes four values: static, relative, absolute,
and fixed. static is the default value; for any other value you have to apply a
CSS declaration.
In order to specify the exact position of the element, you have to add top, bottom,
left, and/or right declarations. These all give coordinates relative to the top/left
or bottom/right reference point. What is this reference point?
position: static: No reference point, since a static block cannot be moved.position: relative: The position the block would take if it were not moved (i.e. if it
had position: static).position: absolute: The containing block, which is the first ancestor element
that does not have position: static. If there is no such ancestor,
the <html> element serves as the containing block. (Note: in older
browsers the <body> element serves as the default containing block.)position: fixed: The viewport (browser window).An element with position: static always has the position the normal flow of the page gives it. It
cannot be moved from this position; a static element ignores any top, bottom,
left, or right declarations.
An element with position: relative initially has the position the normal flow of the page gives
it, but it is subsequently offset by the amount the top, bottom,
left, and/or right declarations give. Therefore, in combination with such a declaration
it appears slightly skewed. The space the element originally took remains empty.
By themselves, relatively positioned elements are uninteresting, since you almost never want to skew an
element by a few pixels. However, a relatively positioned element serves as a containing block; and this is the
usual reason to use position: relative.
An element with position: absolute is taken out of the normal flow of the page and positioned
at the desired coordinates relative to its containing block.
Since the absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if the element is not there: it closes up the space it would take.
An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.
On mobile browsers with their small screens, fixed is complicated. There’s a special mobile test case and a special entry in the mobile table.