1

是否可以在 IE6 和 IE7 中使多个绝对定位的 div 与多个相对定位的 div 重叠？

有关更多信息，请参阅此 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;
}

有两个 relative <div>s（放置在相同的包装器中），每个包含一个 absolute<div>重叠所有 relative <div>s。这在 Chrome、Firefox 等的更新版本中效果很好，没有任何问题，绝对<div>的 withz-index总是放在最前面。

在 IE6 和 IE7 中这不起作用。此问题与标准“标题中的下拉菜单在页面内容后面显示其菜单”之间的不同之处在于，在这些情况下，它通常通过为该特定菜单的父元素提供其他 z-index 等来解决。在这种情况下，两个绝对<div>s放在相同<div>的s中。

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

4

1 回答 1

0

这是可能的，但只能通过减少z-index第二个的.wrapper或增加z-index第一个的.wrapper。

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

问题是一个影响IE <= 7，来自quirksmode.org

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

CSS

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

.lower {
    position: relative;
    z-index: -1;
}

.higher {
    position: relative;
    z-index: 2;
}

.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: 1;
}

HTML

<div class="wrapper"> <!-- add higher class here -->
  <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"> <!-- or add lower class here -->
  <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>
于 2013-06-28T20:50:36.283 回答