IE7 Z-Index Layering Issues

Question

I\'ve isolated a little test case of IE7\'s z-index bug, but don\'t know how to fix it. I have been playing with z-index all day long.

Wha

Answer 1

This bug seems to be somewhat of a separate issue than the standard separate stacking context IE bug. I had a similar issue with multiple stacked inputs (essentially a table with an autocompleter in each row). The only solution I found was to give each cell a decreasing z-index value.

Answer 2

I found that I had to place a special z-index designation on div in a ie7 specific styelsheet:

div { z-index:10; }

For the z-index of unrelated divs, such as a nav, to show above the slider. I could not simply add a z-index to the slider div itself.

Answer 3

If you wanna create dropdown menu and having a problem with z-index, you can solve it by creating z-indexes of same value (z-index:999; for example).. Just put z-index in parent and child div's and that will solve problem. I solve the problem with that. If i put different z-indexes, sure, it will show my child div over my parent div, but, once i want to move my mouse from menu tab to the sub-menu div (dropdown list), it dissapear... then i put z-indexes of same value and solve the problem..

Answer 4

I solved it by using the developer tools for IE7 (its a toolbar) and adding a negative z-index to the container of the div that will be below that the other div.

Answer 5

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});