Question

我阅读了this文章，该文章展示了如何在父母后面（在第三维度中）显示：。

#element {

position: relative;  /* optional */
width: 100px;
height: 100px;
background-color: blue;
}

#element::after {
content: "";
width: 150px;
height: 150px;
background-color: red;
left: 0px;

/* create a new stacking context */
position: absolute;
z-index: -1;  /* to be below the parent element */
}

只要父元素不在另一个元素中，这就很有效。

我创建了一个透明白色（rgba（255,255,255，.6））背景的容器，并将元素放入其中。

之前：在容器后面。

但是当我将一个posotive z-index添加到：before之前，：before将在父级前面移动，但是aprent的内容（文本）仍然可见。这让我非常困惑，因为在没有透明背景的元素（：之前）后面不应该看到文本。

问题是：如何使父母和：在与外部相同的容器内工作之前？

#container {
  padding: 20px;
 background-color:rgba(150,150,150,.8);
}
#element {

position: relative;  /* optional */
width: 100px;
height: 100px;
background-color: blue;
}

#element::after {
content: "";
width: 150px;
height: 150px;
background-color: red;
left: 0px;

/* create a new stacking context */
position: absolute;
z-index: -1;  /* to be below the parent element */
}

<div id="container">
  <div id="element"></div>
</div>

Answer 1

您可以将position: relative;和z-index: 1;应用于容器：

＆＃13;

#container {
  padding: 20px;
  background-color: rgba(150, 150, 150, .8);
  position: relative;
  z-index: 1;
}

#element {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: blue;
}

#element::after {
  content: "";
  width: 150px;
  height: 150px;
  background-color: red;
  left: 0px;
  position: absolute;
  z-index: -1;
}

＆＃13;

<div id="container">
  <div id="element"></div>
</div>

＆＃13;

css：在父元素的父元素后移动（z轴）

1 个答案: