IE 6/7 z index stacking issue with nested divs - help needed
I have a overlay div called overlay which will another div called panel. The panel div is contained in a div named main and this main div has 6 ancestor divs. In IE8/FF/Chrome, I simply set z-index for overlay 9000 and position absolute with top/left 0 and then I append overlay div to body tag, then for panel I set z-index 9999 and show it and things work flawlessly. 开发者_运维问答For IE6/7 this doesn't work. On SO I found that it is due to a z-index stacking bug. Now I am confused as what z-index the ancestors of panel div must have for it to work in IE6 and IE 7. Here is a path for panel div and overlay div
<body tag> > #maincontainerdiv > #div1 > #div2 > #div3 > #div4 > #maindiv > #paneldiv{position: absolute, z-index:9999}
<body tag> > #overlaydiv {zindex:9000, position:fixed, top/left:0px}
The arrows are just for representation of path. Now, as stated earlier, I am not sure what will be the z-index for ancestors of panel div. Any help will be much appreciated. I can not rewrite the mark-up.
put your overlay div at the end of your body, right before the </body> tag.
put your panel div between the overlay div and the </body> tag.
...content
<div id="overlay"></div>
<div id="panel">whatever is inside it</div>
</body>
That should work. (I'm always doing like this)
加载中,请稍侯......
精彩评论