具有绝对定位父级的 Z 索引答案

【问题标题】：Z-index with absolute positioned parent具有绝对定位父级的 Z 索引
【发布时间】：2017-05-19 07:42:32
【问题描述】：

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

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

【问题讨论】：

您可能会因此类问题而被否决。给出你的完整代码，或者做一个工作小提琴。
stackoverflow.com/questions/14483589/…
你的小提琴没有意义，你为什么要在大的正方形下面画小正方形，让它不可见？你不需要 2 个 div 元素吗？
@NoOorZ24 这只是一个划痕，更清楚地解释了我需要什么。我不能给你看真实的例子。使用 2 div 我可以自己完成。但我的任务是只用元素和伪元素之前......

标签： html css z-index

【解决方案1】：

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

问题在于: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>

【讨论】：

【解决方案2】：

我没有使用:before，而是创建了两个单独的 div。查看更新后的jsfiddle 或下面的代码 sn-p：

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

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

希望对你有帮助！

【讨论】：

它可以工作，但我需要继承元素而不是邻居。但是感谢您尝试帮助我！

【解决方案3】：

如果父对象有，你的任务是无法完成的（我猜）：

position: absolute;

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

【讨论】：