Question

我需要:before元素出现在父元素下面，但它不起作用。下面是我的CSS，你可以找到一个有效的例子here。

.element {
  position: absolute;
  z-index: 10;
}
.element:before {
  content:"";
  position: absolute;
  z-index: -1;
}

Answer 1

而不是使用:before我创建了两个单独的div。请参阅下面的更新jsfiddle或下面的代码段：

＆＃13;

.element-1{
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
  z-index:10;
}
.element-2{
  content:"";
  position: absolute;
  width: 20px;
  height: 20px;
  background: green;
  z-index:-1;
}

＆＃13;

<div class="element-1">
  
</div>
<div class="element-2">
  
</div>

＆＃13;

希望它有所帮助！

Answer 2

如果父对象有：

，您的任务无法实现（我猜）

position: absolute;

删除它可以解决问题（如果允许删除它）。

Answer 3

您可以尝试在容器中添加子标记。

问题是:before从其父级继承了z-index。 z-index与图层类似，.element中的所有内容都有z-index: 10，并且只能使用同一“图层”中的元素编入索引。我希望我足够清楚。

.element{
  position: relative;
}

.element .child {
  position: relative;
  top: 0; left: 0;
  width: 200px;
  height: 200px;
  background: red;
  z-index:10;
}

.element:before{
  content:"";
  position: absolute;
  width: 20px;
  height: 20px;
  background: green;
  z-index:-1;
}

<div class="element">
  <div class="child"></div>
</div>

具有绝对定位父级的Z-index

3 个答案: