为什么伪元素的背景会隐藏父元素？

Question

父元素的background-color和border-radius隐藏在伪元素后面。为什么伪元素不在父元素后面，即使它的 z-index 为 -1？

.btn {
  text-decoration: none;
  background-color: royalblue;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 5px;
  color: white;
  display: inline-block;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: cornflowerblue;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

<a href="#" class="btn">Download free app</a>

Answer 1

你只需要添加 overflow: hidden; 到父元素。

.btn {
  text-decoration: none;
  background-color: royalblue;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 5px;
  color: white;
  display: inline-block;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.btn::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: cornflowerblue;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

<a href="#" class="btn">Download free app</a>

Answer 2

罪魁祸首是创建堆叠上下文的 transform 属性因此您的伪元素将绘制在该堆叠上下文中，并且逻辑上将位于背景上方，无论您将 z-index使用。

删除转换以查看差异。我增加了 border-radius 并更改了颜色以便更好地查看。

.btn {
  text-decoration: none;
  background-color: red;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 50px;
  color: white;
  display: inline-block;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.btn::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: cornflowerblue;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

<a href="#" class="btn">Download free app</a>

如果您希望伪元素位于父元素下方，您应该避免使用任何创建堆叠上下文的属性，否则这是不可能的。

或者您考虑使用另一个伪元素来创建背景层，您将能够随心所欲地控制堆叠：

.btn {
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
  padding: 20px;
  position: absolute;
  transform:translate(-50%,-50%);
  top: 50%;
  left: 50%;
}

.btn::before,
.btn::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  z-index:-1;
}

.btn::before {
  background-color: cornflowerblue;
}
.btn::after {
  background-color: red;
  border-radius: 50px;
}

<a href="#" class="btn">Download free app</a>

一些相关问题：

为什么伪元素的背景会隐藏父元素？

Why does pseudoelement's background hide parent's?

html

css

background

z-index

pseudo-element