CSS :before 出现 :after [重复]

Question

我有一个要显示的框，我希望在框后面显示一个背景以覆盖屏幕上剩余的内容。 Box 和 Background 是固定位置的，并且每个的 z-index 都按照您的预期设置，但背景总是覆盖盒子？

.box {
  position: fixed;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  background-color: yellow;
  border: 10px solid green;
  z-index: 1;
 }
 .box:before {
  content: '';
  position: fixed;
  width: 300px;
  height: 300px;
  top: 150px;
  left: 150px;
  background-color: tomato;
  z-index: -1;
 }

<div class="box"></div>

Answer 1

您正在使用position:fixed，然后将您的:before 放置在距顶部150 像素和距左侧150 像素的位置，因此在您的.box 之后是100 像素宽和100 像素高并且定位在距离左侧 100px 和距离顶部 100px 的位置，也是固定位置。

如果你在你的:after 上使用position:absolute，它将相对于它的父 div 定位。例如：

.box {
  position: fixed;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  background-color: yellow;
  border: 10px solid green;
  z-index: 1;
 }
 .box:before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0px;
  left: -110px;
  background-color: tomato;
  z-index: -1;
 }

<div class="box"></div>

编辑：在得到 Amaury Hanser 的评论后，我添加了第二个 sn-p（因为我不知道是不是原版的投了赞成票）。

要将:before 置于.box 的“下方”，就z-index 而言，您可以将:before 与:after 结合使用：

.box:before {
  content: '';
  position: fixed;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  background-color: yellow;
  border: 10px solid green;
  z-index: 1;
 }
 .box:after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  top: 150px;
  left: 150px;
  background-color: tomato;
  z-index: 0;
 }

<div class="box"></div>

简单地说，伪元素很像子/父元素。除非父元素没有指定 z-index，否则子元素的 z-index 不能低于父元素。此外，一些position CSS 规则给出了“默认”z-index，没有孩子可以“突破”它落后。