2

更新！！！

建议的答案不正确，我的错误。#container DIV 应该有“float:left;”。请在 Firefox 和 IE7 中验证 HTML。你可以看到区别！

我无法使用 z-index 让嵌套的 DIV 显示在层次较高的嵌套 DIV 上方...即使较低的嵌套 DIV 具有更高的 z-index ，叠加层仍会覆盖较低的嵌套 DIV...这是甚至可能在 IE7 中？

以下显示 Firefox 中绿色 #overlay 上方的蓝色 #details，但在 IE7 中，蓝色 #details 位于绿色 #overlay 下方

UPDATE2：昂贵 ：添加“z-index：99；” #container 样式使类 .item div 出现（在 Firefox 中，IE 搞砸了：无论如何都不能正确显示），而它们应该在覆盖之下！如果没有设置#container z-index，它会在 Firefox 中正确显示，但在 IE 中无法正确显示...。

<html>
    <body>
        <style type="text/css">
            .item {
                float:left;width:75px;height:75px;background-color:red;
            }
        </style>
        <div id="main" style="position:relative;">
            <!-- this one should overlay everything, except #details -->
            <div id="overlay" style="position:absolute;
                                     top:0px;
                                     left:0px;
                                     width:500px;
                                     height:500px;
                                     z-index:1;
                                     background-color:green;"></div>
            <div id="container" style="position:relative;float:left;">
                <!-- these ones should display UNDER the overlay: so NOT visible -->
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <!-- this one should display above the overlay -->
                <div id="details" style="position:absolute;
                                         width:200px;
                                         height:200px;
                                         background-color:blue;
                                         left:400px;
                                         z-index:99;"></div>
            </div>
        </div>
    </body>
</html>
4

2 回答 2

6

我相信你必须增加 #container 的 z-index 才能在 IE7 中进行这项工作。

替代文字 http://img529.imageshack.us/img529/6416/24042958.jpg

于 2009-05-26T12:10:24.740 回答
1

我不认为 IE7 会让你这样做，除非你可以改变你的标记。

#container 在被赋予绝对位置之前不会坐在#overlay 后面，如果你将#container 的z-index 更改为-1，那么它的子#details 就会跟在它后面。

将 .items z-index 更改为 -1 也不起作用。

如果无法将#details 移到#container 之外？？如果没有确切地看到您试图实现的最终结果以及您拥有的控制权（如果有的话），我无法提出替代方案？

例如，叠加层有什么意义？它会是一个稍微透明的 div 还是实心的？如果用户无法在覆盖层后面看到它们，您不想隐藏 .items 吗？

您是否有权访问任何 javascript 库，例如 Jquery.. 以便能够将 #details 移动到 DOM 中的不同位置？

于 2009-05-27T10:57:20.210 回答