html - 伪元素问题的 z-index

Question

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

#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

Answer 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>