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>