爲什麼display table-cell的嵌套元素會顯示在更高的外部元素上？

Question

我有一個嵌套在z-index: 0的元素內的元素，它位於z-index: 1的元素下面。該父元素*在另一個元素下正確顯示**。但是，當我製作子元素display: table-cell; z-index: 2時，它會從其父元素（在垂直的z軸上）跳出並在較高的外部元素上跳出！爲什麼會發生這種情況，我該如何阻止它？

例子：http://jsfiddle.net/5x8jy74o/
實例與父母爲display: table，同樣的問題：http://jsfiddle.net/5x8jy74o/1/

HTML：

<div class="hover"> 
HOVER IN HERE 
</div> 
<div class="container"> 
    <div class="tc"> 
    This should be under 
    </div> 
</div> 

CSS：

.hover 
{ 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100px; 
    background-color: #e8e8e8; 
    z-index: 1; 
} 

.container 
{ 
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 

.tc 
{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 50px; 
    background-color: blue; 
    display: table-cell; 
    z-index: 2; 
} 

Answer 1

這是完全無關的事實元素有display的table-cell 。因爲.container元素其實不是establishing a stacking context。儘管.container元素相對定位，但仍具有auto的默認z-index，而不是0。

如果要建立堆疊上下文並防止子元素出現在上一個兄弟之上，請添加z-index: 0。否則.tc將繼續出現在.hover之上，因爲z-index的2明顯高於1。

Updated Example

.container { 
    position: relative; 
    z-index: 0; 

    /* .. */ 
}