元素的z-index然而定位不同？

Question

快速提问;如果你有两个div，一个absolutley定位和一个亲戚，它不做z-index，我附加了一个jsfiddle。

如果我把它们都变成相对的，那么它们会与DOM的流动相关，而一个在y轴上方而不是z，在任何想法上都会超过另一个？

Example JSfiddle（感谢Onheiron在jsfiddle中修复渲染）

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

感谢。

Answer 1

你不能让孩子出现在它的父母身后！你只能和兄弟姐妹一起做。

查看您的updated fiddle

Answer 2

要回答这个问题，我需要解释堆叠背景。

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

有explanation of z-index and Stacking Context here。