z-index：1;上：不工作

Question

後，我已經看到了以前的答案是：會走其父背後當孩子被設置爲後：

z-index:-1; 

...和家長的設置沒有的z-index所以-1定義了順序。

我已經這樣做了，但它仍然保持在堆棧中的父代上方（如黑色方塊上的綠色條所代表的那樣）。如何使綠色條移動到堆棧的底部？謝謝。

http://jsbin.com/xoguzezupego/1/edit

Answer 1

的問題是，就好像它們是的.left-table子元素的兩個僞元件被堆疊，並且同樣地，它們形成被認爲是的堆疊順序的一部分的堆疊內容其父塊，即.left-table。

您需要創建一個背景蒙版元素，該元素是.left-table的子元素，然後 將其絕對定位在.left-table之內。

當你這樣做，那麼z-index可以用來堆積紅色和黑色元素後面的綠色矩形。

瞭解更多關於堆疊順序是如何工作的：http://www.w3.org/TR/CSS21/zindex.html#stacking-defs

注：目前尚不清楚對我變換試圖這樣做什麼，我離開他們了，因爲 他們不相關的問題堆疊順序。

.left_table{ 
 
    position:absolute; 
 
    top:0px; 
 
    left: 0; 
 
    width:250px; 
 
    height:175px; 
 
} 
 
.inner-mask { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background-color: #000; 
 
} 
 
.left_table:before{ 
 
    content:''; 
 
    position:absolute; 
 
    background-color: red; 
 
    bottom:-28px; 
 
    width:250px; 
 
    height:30px; 
 
} 
 

 
.left_table:after{ 
 
    content:''; 
 
    position:absolute; 
 
    background-color: green; 
 
    right:30px; 
 
    width:15px; 
 
    height:250px; 
 
    z-index: -1; 
 
}

<div class="left_table"> 
 
<div class="inner-mask"></div> 
 
</div>