Problem
z-index is not performing properly in internet explorer, ie6, ie7, etc.
Don’t worry it’s not you, this is yet another bug in IE. IE does not render z-index properly:
“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”
Solutions/Workarounds
- Give the element (that should be behind) a z-index:-1 and position:relative
- Give the parent of the front element a higher z-index.
- Become a white water rafting tour guide.
I struggled with this bug for days and finally found a place where I could apply this fix. There are several other work arounds as well as more details on how to apply this fix to the IE z-index bug in this binder:
http://www.livebinders.com/play/play?id=1808
Thanks for listing down the possible solutions! Giving the parent a higher z-index worked for me
Hi,
it’s nice solution but not worked for me.
I have case with menu, under menu I have tabs. Relative z-index -1 make tabs unavailable.
Finally I did my solution with Jquery and relative position:
jQuery().ready(function(){
$(“.slidemenu”).hover(
function(e) {
$(‘#neg_position’).css(“z-index”,”-1″).css(“position”,”relative”);
},
function() {
$(‘#neg_position’).css(“z-index”,”").css(“position”,”");
}
).mousemove(
function(e) {
$(‘#neg_position’).css(“z-index”,”-1″).css(“position”,”relative”);
}
);
});
slidemenu is container of my menu,neg_position my tabs container
I hope it help to somebody.