Internet Explorer: CSS, z-index, and position

Originally published at Now Is A Long Time Too. You can comment here or there.

I spent a total of about 12 hours trying to get some oddities of CSS in IE - z-index and stacking order - to work as I wanted them to in Internet Explorer. Essentially, any block element in the code defines its own stacking context for z-index purposes, if it has a position set. So if you’ve dropdowns from a menu bar across the top, they’ll vanish behind any divs with position: absolute or position: relative defined later in your HTML source. And since those two are pretty nearly essential for any kind of layout, that causes problems.

The solution? Rearrange the code so the menu is in the html source after the content, and use CSS to position it correctly. Brute force and ignorance, yes, but it works. And it has the added benefit of placing your content further up the code for search engines, if you consider that important.

I award myself 100 DKP and a biscuit, and proceed to the next problem.