按钮及button::after的z-index未按预期生效问题求助

问题根源 #

你设置的按钮同时具备position: relative+z-index: 100和opacity: 99%，这两个属性都会让按钮创建独立的堆叠上下文。在这个上下文里，按钮的白色背景层位于伪元素（::after）的上方，导致伪元素被背景遮挡，只能在文字区域透出，无法显示在整个按钮后方。

修复方案 #

只需要调整按钮的堆叠上下文设置，让伪元素能真正处于按钮的底层：

1. 移除按钮的z-index: 100（保留position: relative用于定位伪元素即可）；
2. 伪元素的z-index设为-1即可（无需-100，足够让它处于按钮后方）。

修改后的完整代码：

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

<style>
.primary-button {
  position: relative;
  
  padding: 16px 32px;
  background-color: #fff;
  
  color: #333;
  border-radius: 13px;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  opacity: 99%;
}

.primary-button::after{
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  
  width: 102%;
  height: 102%;
  background: linear-gradient(
    90deg,
    rgba(167, 158, 252, 1) 20%,
    rgba(138, 179, 252, 1) 80%
  );
  
  top: 6px;
  left: 4px;
}
</style>

额外方案（若需保留按钮z-index） #

如果必须给按钮设置z-index，可以通过嵌套容器实现：

• 给按钮套一个position: relative的容器，把z-index设置在容器上；
• 按钮本身不设z-index，伪元素的z-index: -1会相对于容器，自然处于按钮后方。

内容的提问来源于stack exchange，提问作者BrNel