按钮和按钮上的Z索引：在没有做我认为应该做的事情之后

Question

我有一个设置为相对的按钮和一个绝对定位的渐变元素，应该位于后面。该元素位于按钮文本的后面，而不是实际的按钮。我猜测后块和按钮填充和边框以某种方式粘在一起，因此 z 索引只是将它们推回原处，但我不知道如何修复它。

我试过了

1. 弄乱 z 索引
2. 不同位置设置
3. 尝试一些方法来重置索引
4. 我使用 z-index 将 after 块移动到文本前面，以测试 z-index 是否做了任何事情

一个小提琴示例 （尝试将渐变移动到白色按钮后面。 https://jsfiddle.net/lazer_lad/sL7x5ugy/7/

<button class="primary-button">Learn More</button>

<style>

.primary-button {
  
  z-index: 100;
  position: relative;
  
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: #fff;
  
  color: #333;
  border-radius: 13px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  opacity: 99%;
  
}
.primary-button::after{
  content: "";
  position: absolute;
  z-index: -100;
  border-radius: inherit;
  
  width: 102%;
  height: 102%;
  background: rgb(138, 179, 252);
 
  background: linear-gradient(
    90deg,
    rgba(167, 158, 252, 1) 20%,
    rgba(138, 179, 252, 1) 80%
  );
  
  top: 6px;
  left: 4px;
  

}


</style>

Answer 1

只需将按钮包装在“btn”容器中，然后将“::after”伪元素应用于此包装器。

.btn-wrap {
  z-index: 1;
  position: relative;
  display: inline-block;
  border-radius: 13px;
}
.primary-button {
  padding: 16px 32px;
  background-color: #fff;
  color: #333;
  border-radius: inherit;
  margin-block: 0px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  opacity: 99%;
  
}
.btn-wrap::after{
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  width: 102%;
  height: 102%;
  background: rgb(138, 179, 252);
  background: linear-gradient(
    90deg,
    rgba(167, 158, 252, 1) 20%,
    rgba(138, 179, 252, 1) 80%
  );
  top: 6px;
  left: 4px;
}

<div class="btn-wrap">
  <button class="primary-button">Learn More</button>
</div>