The position declaration

Position is (somewhat) supported by all browsers except for iCab.

The position declaration lets you declare what the position of an element should be. It can be static (in the flow of the page), relative (also in the flow, but slightly adjusted), absolute (fixed position in the document) or fixed (fixed position on the screen).

position: fixed

Works in Mozilla, Opera 5+, Explorer 5 on Mac, Konqueror.

If a browser doesn't understand position: fixed it sets the position to static, except for Omniweb, which sets it to absolute.

However, Explorer 6 Windows doesn't really use static: the element has a static position only relative to its previous sibling. See the navigation frame for an example.

position: fixed gives the HTML element a position fixed on the screen, so that it stays where it is put regardless of scrolling.

This is a paragraph with position: fixed. Hide it.

Show fixed paragraph.

position: absolute

Works in all browsers. In Explorer 4 it only works on a DIV.

position: absolute gives the HTML element a position fixed in the document, regardless of the other content. Thus it may be placed over other elements on the page. This is the archetypical layer: a bit of the page that can be moved and hidden independently.

This is a paragraph with position: absolute. Hide it.

Show absolute paragraph.

absolute with right

Does not work in Netscape 4, Explorer 4 and Opera 5.

If you add a right: 50px to an absolutely positioned element, you set not its coordinate relative to the left of the document, but relative to the right of the document. Thus you can align blocks to the right of the page.

Show absolute paragraph with a right declaration.

position: relative

Works in all browsers except for Omniweb.

position: relative means that the HTML element is placed by the natural flow of the page (below the previous element and above the next one), but you can still adjust its position. The paragraph below has a top and a left of 20px. This is calculated from the position it would take in the normal flow of the page.

This is a paragraph with position: relative and top: 10px; left: 20px.

This paragraph behaves as if the previous paragraph were positioned normally. It doesn't react to the change of position of the previous paragraph.

relative with right

Does not work in Netscape 4 and Explorer 4.

If you give a relative positioned paragraph a right declaration you set its coordinate relative to the right margin of the position it would take in the normal flow. At least, that's what I think happens with the paragraph below. The behaviour is the same in all browsers, so it should be correct.

This is a paragraph with position: relative and right: 50px.

position: static

position: static means that the HTML element is positioned by the natural flow and that this position cannot be changed. I gave the paragraph below a top and left declaration, these should be ignored.

This is a paragraph with position: static and top: 20px; left: 20px.

No position defined

An HTML element without a position declaration should default to position: static. Works fine, even in Netscape 4.

This is a paragraph without a position declaration with top: 20px; left: 20px.