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

注意：我不清楚变换尝试做什么，所以我把它们排除在外它们与堆叠订单的问题无关。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

的z-index：1;在：不工作之后

1 个答案: