This article will guide you on how to provide simple quick fix about the z-index css property not working in Internet Explorer. I had encountered this problem while using JQuery Tools Overlay Library on my application. The library works fine in Mozilla Firefox, Chrome and in Internet Explorer 7 but unfortunately does not work in IE6 and IE8.

To solve this problem, we had to wrap the div that is to be on top of all the other elements with a div that has higher z-index than that div.

For example, this is the div that is to be overlayed:

<div style="position:absolute;z-index:5000;">
     content here
</div>

The z-index of the div is 5000, we have to wrap it in a div that has higher z-index, 5001 in this example, but you can put any number you like provided that the number must be higher than the z-index of the inner div, like this:

<div style="position: relative; z-index: 5001">
     <div style="position:absolute;z-index:5000;">
          content here
     </div>
</div>

Well that’s how I had solved it. Hope this quick fix works for you also.