更改所有父元素的css位置，但负css z-index不能按预期工作

Question

我创建了css按钮效果。我看到有些人使用负z-index。我使用它并且它正常工作但我很困惑它的奇怪行为。

这是我的html标记：

<div class="container">
  <div class="btn">
    <a href="#">Click Me</a>
  </div>
</div>

我设置'.container'位置相对，'。btn'绝对，'a'相对和a ::绝对后。我把-1 z-index给'a :: after'。但为什么'a :: after'不属于所有元素。但是当我设置'a :: after'z-index 2和'a'z-index 3按钮效果不能按预期工作时'a :: after'背景颜色高于'a'。为什么这两种方法的工作方式不同？为什么'a :: after'不在第一种方法的所有元素之下。

这是我的css代码：

.container{
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #100f33;
  margin: 0 auto;
}
.btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn a{
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  display: block;
  position: relative;
  padding: 20px;
  border: 1px solid #75230f;
  width: 80px;
  margin: 0 auto;
  overflow: hidden;
}
.btn a::after{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  width: 0;
  height: 100%;
  background-color: #840f38;
  transition: all 0.3s;
}
.btn a:hover::after{
  width: 100%;
}

Answer 1

z-index是css中一个如此不同的主题。如果你想发送:after区域去下。您需要将z-index属性赋予a元素。 （在此更改后，您将丢失可点击的链接。）

因为：

z-index始终使用父元素。如果你将z-index: 1添加到.btn类。您将为所有.btn子元素创建新图层。

如果您想了解有关z-index和图层的更多信息。你应该访问：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

Answer 2

我将首先简化你的代码，如下所示，以避免使用任何伪元素和处理z-index

.container{
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #100f33;
  margin: 0 auto;
}
.btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn a{
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  display: block;
  position: relative;
  padding: 20px;
  border: 1px solid #75230f;
  width: 80px;
  margin: 0 auto;
  overflow: hidden;
  background:linear-gradient(#840f38,#840f38) center no-repeat;
  background-size:0% 100%;
  transition: all 0.3s;
}
.btn a:hover{
  background-size:100% 100%;
}

<div class="container">
  <div class="btn">
    <a href="#">Click Me</a>
  </div>
</div>

然后你可以参考这个问题来更好地理解z-index和堆叠上下文：Understanding z-index stacking order