伪元素问题的 z-index答案

【问题标题】：z-index of pseudo element issues伪元素问题的 z-index
【发布时间】：2017-07-11 20:34:44
【问题描述】：

我在让我的伪元素落后于其父元素时遇到问题。我需要红框在蓝框前面。

#mobile-nav-icon {
  position: absolute;
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
  z-index: 2;
}

#mobile-nav-icon:before {
  content: '';
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
  position: absolute;
  z-index: -1;
}

<div id="mobile-nav-icon">
  <p>menu</p>
</div>

结果很奇怪，文本在伪元素的前面，而父元素的背景却没有。

有什么想法吗？

jsfiddle

【问题讨论】：

Is it possible to set the stacking order of pseudo-elements below their parent element?的可能重复
只需从父级中删除z-index:2...jsfiddle.net/muzx11fb

标签： html css

【解决方案1】：

擦除第一条规则的z-index：

#mobile-nav-icon {
  position: absolute;
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
}

#mobile-nav-icon:before {
  content: '';
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
  position: absolute;
  z-index: -1;
}

<div id="mobile-nav-icon">
  <p>menu</p>
</div>

【讨论】：

【解决方案2】：

尝试同时使用:before 和:after。

#mobile-nav-icon {
  position: absolute;
}
#mobile-nav-icon:after {
  position: absolute;
  content: '';
  display: block;
  height: 92px;
  width: 93px;
  background-color: red;
  right: 16px;
  top: 46px;
  z-index: 2;
}

#mobile-nav-icon:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -9px;
  left: -10px;
  background-color: blue;
  height: 93px;
  width: 97px;
}

<div id="mobile-nav-icon">
  <p>menu</p>
</div>

【讨论】：