CSS: Internet Explorer, position relative/absolute and z-index don't act right

Another day, another IE6/IE7 CSS quirk. Good thing it doesn't affect IE8 and luckily this ones a bit easier to fix than most.

image

It doesn't make sense. The light blue div on the bottom left has the "position: relative;" style set, while the menu has "position: absolute" with a higher z-layer index.

For some reason, IE decides to just ignore the z-layer and put the div on top anyway. Annoying little critter...

To fix this:

  • Give the troublesome div a small z-index (0 or so)
  • Give the menu a higher z-index, say 10 (anything higher than 1 will do)
  • Give the menu's parent a z-index of anything thats higher than the menu.

[ Source ]

 
Copyright © Twig's Tech Tips
Theme by BloggerThemes & TopWPThemes Sponsored by iBlogtoBlog