Providing cross-browser support (for simple UIs) is much nicer than it used to be but the occasional hiccup can certainly still be expected.
In the last few months I’ve implemented a couple of components that needed to popup “on top of” what was already displayed. The only real gotcha seems to be with how IE deals with (or doesn’t deal with) the mix of absolute positioning, z-index, and how elements are nested.
The trick is basically that IE doesn’t like your hidden widget (which would be ‘position: absolute’) to be nested inside the element with ‘position: relative’… it’s not a huge fan of them being direct neighbors either. What I’ve found to do the trick is adding a seemingly unnecessary span into the mix. By following this pattern:
.
<div style="position: relative; z-index: 1">Some stuff</div>
<span>
<div id="other_guy" style="background-color: red; position: absolute; z-index: 2; display: none;">I'm on top</div>
</span>
<div>Passersby where amazed by the amount of blood.</div>
Of course, all of this (maybe) goes out the window when you’re not trying to hide the absolutely positioned div in the first place. There, I’ve actually had success with the nesting, but who really needs something that looks like that?
It’s simple compared to some other solutions that I’ve seen and (at least in my cases) has done the job for Firefox and the last couple of IE versions.
