Fix the z-index bug under the Internet Explorer

Posted on 12th Apr, 2010. Posted in: CSS, debug, Fun

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Positioning the HTML elements using relative or absolute positioning, can bring a problem with z-index positioning especially under the Internet Explorer (beloved browser lol). This can be extremely frustrating problem and I have been avoiding relative and absolute positioning, transforming my designs into the HTML. In fact, it is easy to fix it. The problem is easy to solve when you understand how Internet Explorer reads relative or absolute positioning.

Problem

Let’s bring up the example to work with. Navigation with drop-down menu and content element positioned absolutely (content images). Under the Internet Explorer z-index is somehow ignored and it seem not possible to put our content images above the drop-down navigation.

Fix z-index bug under the Internet Explorer

Drop-down menu element is obviously positioned absolutely where the relative element is our main navigation container. So the structure reads:

<!– relative positioning on main navigation container –>
<ul id="main_nav" style="position:relative">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<!– absolute positioning on drop-down navigation –>
<ul id="drop_down_nav" style="position:absolute">
<li><a href="#">Sub-nav</a></li>
<li><a href="#">Sub-nav</a></li>
<li><a href="#">Sub-nav</a></li>
<li><a href="#">Sub-nav</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
<li>

All you have to do is to put higher z-index on the parent (or grandparent if any) element of the navigation.

<!– relative positioning on main navigation container –>
<ul id="main_nav" style="position:relative;z-index:5000">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<!– absolute positioning on drop-down navigation –>
<ul id="drop_down_nav" style="position:absolute;z-index:2000">
<li><a href="#">Sub-nav</a></li>
<li><a href="#">Sub-nav</a></li>
<li><a href="#">Sub-nav</a></li>
<li><a href="#">Sub-nav</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
<li>

The works because IE doesn’t allow elements to have a higher z-index than their parent (grandparents) element.

The issue is that when you give a relative positioning to a container (our main navigation), it restarts the z-indexing inside of it at 0, and the global-level z-index of everything inside the container becomes the same as the parent.

You need to put the higher z-index on the top most relatively positioned element. Don’t just put the higher z-index on the parent element, put it on the first parent that is positioned relatively.