开发者

IE 6/7 z index stacking issue with nested divs - help needed

开发者 https://www.devze.com 2023-03-06 22:54 出处:网络
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 fo

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)

0

精彩评论

暂无评论...
验证码 换一张
取 消