The position CSS property was my friend today, along with it’s co-conspirator, z-index. It helped me out with a situation where I have a footer which extends upward into the content area (a web-2.0-ish gradient to white) and the content partly overlaps. IE was as usual being contrary, displaying the footer on top of the text while every other browser had the footer behind it (The real irony here is IE’s behavior seems to be more “correct”, as the footer comes after the content in the HTML).
Giving position and suitable z-index values to the footer and content allowed the page to appear the way I wanted it to.
There’s a great writeup of these CSS properties titled “Give Me Some Zzzzz’s“) which by coincidence showed up today in one of my RSS feeds.
Especially useful was the note about how position works, and what an absolute positioned element is positioned in relation to.
Another byproduct of adding position:relative to an element is that the element now becomes the “containing block” for further positioned elements. This would allow you to define absolutely placed elements in relation to that newly created stacking context. The “containing block” of an element is defined as the nearest ancestor that has a value set for the property “position” other than static (e.g. the parent should be position:relative or position:absolute or position:fixed). If no parent exists then the containing block becomes the root element which is the HTML (or body outside of margins set), which effectively means the viewport.
Making a block position:relative has no impact on positioning (unless you specify top, left, bottom or right also).
