absolute 中相对定位的项目。 IE中的问题答案

【问题标题】：Relatively positioned items inside absolute. Problems in IEabsolute 中相对定位的项目。 IE中的问题
【发布时间】：2011-07-28 16:33:49
【问题描述】：

这让我很头疼。我在 IE (6/7) 中遇到以下代码的问题。

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

我提供了一个非常精简的示例供您查看。我无法删除位置：相对；在容器或位置上：绝对；在内部项目上，因为这最终将是一个 html 下拉项目。

非常感谢您的帮助。

Preview here.

<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>

【问题讨论】：

标签： css internet-explorer-6

【解决方案1】：

在 IE 中，你不能有一个 z-index 比它的容器更高的 div，所以如果你想让“内部”元素在其他 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 属性的东西，但即使是样式属性也可以解决问题。

【讨论】：

很好，这行得通。在打开它之前，我必须通过 javascript 动态添加它。没有其他静态方法可以做到这一点。
你的回答对我也很有帮助！谢谢。

【解决方案2】：

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

This article 声明为父元素提供更高的 z-index 将修复该错误。试一试。

【讨论】：

尝试添加 z-index: 6000;到 .item 并且它没有执行任何不同:(

【解决方案3】：

恐怕IE不支持z-index。

IE 从上到下为每个项目分配一个 zindex。所以在底部出现的东西有更大的优先级。

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

【讨论】：