z-index元素的不同定位？

Question

快速的問題;如果你有2個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」的堆疊上下文中。

爲了把「影子」的背後「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。