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>


<div id="other_guy" style="background-color: red; position: absolute; z-index: 2; display: none;">I'm on top</div>


<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.



Leave a comment

Filed under ajax

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s