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.
Drop-down menu element is obviously positioned absolutely where the relative element is our main navigation container. So the structure reads:
<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.
<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.
Solved solution
As you can see, now our drop-down navigation appear in front of the content images.
Javascript approach
Alternatively we can use jQuery solution. The code will start with a z-index of 1000, and decrement the z-index for each DIV element of the page.
I hope you enjoyed.
