Fixing the IE6 Z-index bug.
IE6 - z-index bug Fix
I’ve been building a site over the last few days, and upon testing in IE6 Noticed one of my absolutely positioned divs – (the container for my menu) was displaying below a 2nd div which was also absolutely positioned. See the top of the image on the left. Surely this must be an IE6 Specific bug so I checked across other browsers and sure enough, the problem only occurred in Internet Explorer 6.
The menu container had a z-index of 999, and as such should have been displaying above the second absolutely positioned container – see the bottom of the image on the left.
Confused I asked Google for a little help, and i found a very simple solution..
By giving the parent element of the first absolutely positioned div (the menu-container) a higher z-index! This fixed the problem in IE6 without causing any further issues in other browsers.
And there you have it, a really simple quick fix to the ie6 z-index bug!
No Comments