Question

我有一个要显示的框，并且我想在框后面显示一个背景以覆盖屏幕上剩余的内容。 Box和Background是固定的bot位置，并且每个z-index的设置都符合您的预期，但是背景始终覆盖了box？

.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放置在顶部150px和左侧150px的位置，因此通常在.box之后宽度为100像素，高度为100像素，位置为左侧100像素，顶部100像素，并且位置固定。

如果您在position:absolute上使用:after，它将相对于其父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的评论后，我要添加第二个代码段（因为我不知道它是否是被推荐的原始海报）。

要将: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，并且没有子级可以“突破”它的后面。

CSS：before出现：after

1 个答案: