Effect of z-index on AP and RP elements
Probably the most complex CSS layout I built is the one that runs the Internet channel of my company’s main product. As this channel is viewed by customers of our clients, each design has to be different enough. Sites must not look like copycats with different colours. They also need to run on the same server-side code, to simplify maintenance and development.
CSS floats and positioning is the right tool for that job on today’s Internet. While I fully grasp the float stuff and use it with much joy, the positioning part is often giving me headache. The online channel interface relies heavily on positioning, showing/hiding elements and neat stacking of boxes below/above each other.
Positioning also gives me way too much trouble with my multi-level menu.
Trying to clarify these things for myself and resolve ongoing problems, I built a series of pages to see how various z-index values influence the placement of relatively and absolutely positioned elements. I have dozens of nested RP and AP elements in the mentioned interface, and some overlapping issues seems unsolvable.
After three or four pages, I realized that this could be a neat tutorial, especially because I don’t see that this issue is tackled much in books, blogs and other resources.
Thus, here it is: The effect of z-index value on RP and AP blocks.
The best part: the only browser(s) that correctly implements CSS2.1 specification is IE. Yes, really.
update (Sep 15th): Dave Hyatt responded and proved me very wrong. The guide is now updated with (hopefully) correct information.
I tested in Firefox 0.9.2, Opera 7.5, IE6.01, IE5.2.3/Mac, Safari 1.2.3, OmniWeb 5.0, Camino 0.8.