html - 元素的z-index但是不同的定位？

Question

快速提问；如果你有 2 个 div，一个绝对定位和一个相对，它不做 z-index，我附上了一个 jsfiddle。

如果我让它们都是相对的，它们会随着 DOM 的流动而移动，并且一个在 y 轴而不是 z 上高于另一个，有什么想法吗？

示例 JSfiddle（感谢 Onheiron 修复了 jsfiddle 中的渲染）

发生的事情的屏幕截图：http: //i.imgur.com/Lo37y.png，灰色的东西应该在图像后面。

谢谢。

score 3 · Accepted Answer

你不能让孩子出现在它的父母身后！你只能对兄弟姐妹这样做。

score 2 · Accepted Answer

要回答这个问题，我需要解释一下堆叠上下文。

当您向元素添加 z-index 时，它会创建一个堆叠上下文。然后将所有子元素与此父堆叠上下文进行比较。

您的元素“slideImg”的 z-index 为 1000。然后在此父元素的堆叠上下文中比较任何子元素。所以“shadow”的z-index，也就是0，实际上是“1000 + 0”，因为它在“slideImg”的堆叠上下文中。

要将“shadow”放在“slideImg”后面，您可以反转它们的嵌套：

    <div id="shadow">    
          <div id="slideImg"></div>    
    </div>

或者将它们彼此相邻放置，以便将它们各自考虑在相同的堆叠上下文中。

    <div id="shadow"></div>
    <div id="slideImg"></div>

2 回答 2