Question

是否有可能使多个绝对定位的div与IE6中的多个相对定位的div重叠。 IE7？

有关详细信息，请参阅此jsFiddle： http://jsfiddle.net/btker/1/

HTML

<div class="wrapper">
    <div class="relative_div">Relative div.
        <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
    </div>
</div>

<div class="wrapper">
    <div class="relative_div">Relative div.
        <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
    </div>
</div>

CSS

.wrapper{
height: 100%;
width: 100%;
}

.relative_div {
    height: 75px;
    width: 200px;
    border: 1px solid #000;
    padding: 10px;
    background: #e6e6e6;
    margin: 0 0 35px 0;
    position: relative;
}
.absolute_div {
    height: 100px;
    width: 250px;
    border: 1px solid #000;
    background: #c6c6c6;
    padding: 10px;
    position: absolute;
    top: 40px;
    left: 100px;
    z-index: 100;
}

有两个相对<div> s（放置在相同的包装器中），每个包含一个与所有相对<div>重叠的绝对<div>。这在Chrome，Firefox等更新版本中没有任何问题，效果很好，绝对<div> z-index始终位于顶部。

在IE6和IE7中，这不起作用。这个问题与标准“标题下拉列表显示其页面内容后面的菜单”之间的差异在于，在那些情况下，它通常通过给予该特定菜单的父元素其他z-index等来固定。在这种情况下，两者绝对{ {1}}被置于相同的<div> s。

这可以解决，因此绝对<div>总是在IE6＆amp;中的所有相对<div>之上。 IE7？ IE的条件注释可用于使解决方案跨浏览器。

Answer 1

有可能只能降低第二个z-index的{{1}}或增加第一个.wrapper的{{1}}。

在简单的层面上，每个带有非自动z-index的定位元素都会创建一个新的堆叠上下文，尽管在其他情况下会创建新的堆叠上下文 - 请参阅The stacking context。

问题是影响来自quirksmode.org

的.wrapper的问题

在Internet Explorer中，定位元素生成一个新的堆叠上下文，从z-index值0开始。因此z-index无法正常工作。

<强> CSS

IE <= 7

<强> HTML

z-index

IE6和IE7绝对定位div在多个相对div之上

1 个答案: