显示在父 div 文本后面但在父 div 前面的伪元素答案

【问题标题】：Psuedo element to display behind parent divs text but in front of parent div显示在父 div 文本后面但在父 div 前面的伪元素
【发布时间】：2015-08-11 09:14:08
【问题描述】：

我有一个伪元素，它是 div 内的粉红色背景，如下所示：

<div>
  Hello
</div>

div {
  background-color: green;
  display: inline-block;
  padding: 20px;
  position: relative;
}

div::after {
  content: "";
  background-color: pink;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

这里还有一个代码笔来说明我的意思：http://codepen.io/acha5066/pen/oXVPzg 我想要绿色背景前面的粉红色背景，但文本 Hello 后面。我怎样才能做到这一点？

【问题讨论】：

标签： css

【解决方案1】：

div {
  background-color: green;
  display: inline-block;
  padding: 20px;
  position: relative;
  z-index: 0 /* we etablish a new stacking context */
}

div::after {
  content: "";
  background-color: pink;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1
}

<div>
  Hello
</div>

一篇可以帮助你理解堆叠上下文的好文章：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

【讨论】：