Question

这让我很头疼。我在IE（6/7）中遇到问题，代码如下。

我在页面上有许多相对定位的容器项。其中一个是绝对定位的项目。此内部项目应显示在任何容器项目上。这在Safari和Firefox中正确显示，但在IE中则不正确。

我已经包含了一个非常简单的示例，供您查看。我无法删除位置：相对;在容器或位置：绝对;在内部项目，因为这将最终是一个HTML下拉项目。

非常感谢你的帮助。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="http://www.louiswalch.com/common/css/reset.css" type="text/css" rel="stylesheet">
    <style type="text/css">     

        BODY { padding: 20px; }

        .item {
            margin-bottom: 5px;
            padding: 5px;
            background-color: orange;       
            position: relative;
            float: left;
            width: 300px;
            }

            .item .display {
                background-color: red;
                }

            .item .inside {
                padding: 5px;
                background-color: yellow;
                position: absolute;
                top: 23px;
                left: 10px;
                width: 100%;
                z-index: 5000;
                }           

        .clear { clear: both; }

    </style>
</head>
<body>
    <div class="item">
        <div class="display">Item</div>
    </div>
    <div class="clear"></div>

    <div class="item">
        <div class="display">Item (Open)</div>
        <div class="inside">This is inside<br/>more<br/>more</div>
    </div>
    <div class="clear"></div>

    <div class="item">
        <div class="display">Item</div>
    </div>

</body>
</html>

Answer 1

在IE中，你不能拥有一个z-index高于其容器的div，所以如果你想让“inside”元素弹出其他div之上，那么它的容器也必须高于这些元素（不是确定标准是什么，但从逻辑上讲，IE方式似乎更有意义。

在您的示例中，请执行此操作...

<div class="item" style="z-index:5000">
            <div class="display">Item (Open)</div>
            <div class="inside">This is inside<br/>more<br/>more</div>
    </div>

....你的菜单现在会像在FF中一样位于底部项目之上。

理想情况下，你只想创建一个名为“itemOpen”的样式或者像这样设置z-index属性的东西，但即使是style属性也可以。

Answer 2

显然在IE中，定位元素生成独立于任何定义的z-index值的堆叠顺序。 link text

This article表示给父元素一个更高的z-index将修复bug。试一试。

Answer 3

IE不支持z-index。

IE从上到下为每个项目指定一个zindex。因此，无论底层有多少都有更大的优点。

例如，当我创建下拉菜单时，我确保它们位于主要内容下方的代码中。

相对定位的物品在绝对范围内。 IE中的问题

3 个答案: