相对定位的元素在绝对定位的元素内部。IE中存在问题。

Question

相对定位的元素在绝对定位的元素内部。IE中存在问题。

cssinternet-explorer-6

3

这让我头疼。我在IE（6/7）中遇到了下面的代码问题。

页面上有许多相对定位的容器项。其中一个内部项目是绝对定位的。这个内部项目应该出现在任何容器项之上。在Safari和Firefox中，这样做是正确的，但在IE中不行。

我为您提供了一个非常简化的示例。我不能删除容器上的position: relative;或内部项目上的position: absolute;，因为这最终将成为一个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>

- Louis W

3个回答

1

在IE中，定位元素产生独立于任何定义的 z-index 值的堆叠顺序。链接文本

这篇文章指出给父元素一个更高的 z-index 值可以修复这个 bug。试一下吧。

- Evan Meagher

尝试将z-index: 6000;添加到.item中，但没有任何不同的表现:( - Louis W

0

很抱歉，IE不支持z-index。

IE会为每个项目分配一个从上到下的z-index。因此，出现在底部的任何内容都具有更高的优先级。

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

- Lee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cavillac · Accepted Answer

在IE浏览器中，一个div元素的z-index值不能高于其容器的z-index值，因此如果您想使“内部”元素在其他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>

现在，您的菜单将会像在Firefox中一样在底部项目上方显示。

理想情况下，您应该创建一个名为“itemOpen”或类似名称的样式，该样式已设置了z-index属性，就像以下示例一样，但即使使用style属性也可以完成任务。