Question

我有一个psuedo元素，它是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后面。我怎样才能做到这一点？

Answer 1

＆＃13;

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
}

＆＃13;

<div>
  Hello
</div>

＆＃13;

一篇很好的文章，可以帮助您理解堆叠背景：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

Psuedo元素显示在父div之后但在父div之前

1 个答案: