当为按钮设置 position: relative 并尝试用 ::after 创建背景渐变时，直接在按钮上设置负 z-index 无法使其真正“置于按钮下方”，因为子元素（包括伪元素）无法被父元素的 z-index 所压盖——这是 CSS 层叠上下文的核心规则。
当为按钮设置 `position: relative` 并尝试用 `::after` 创建背景渐变时，直接在按钮上设置负 `z-index` 无法使其真正“置于按钮下方”，因为子元素（包括伪元素）无法被父元素的 `z-index` 所压盖——这是 css 层叠上下文的核心规则。
在 CSS 中，z-index 仅对已定位元素（即 position 为 relative/absolute/fixed/sticky）生效，但关键限制在于：一个元素的 z-index 值永远无法让它的子元素（含 ::before/::after）渲染在其自身内容之下。这是因为伪元素是该元素的子级渲染框，二者共处于同一层叠上下文（stacking context），而父元素的内容（文本、边框、内边距区域）默认位于子元素的上方（按层叠顺序：border → background → content → ::before → ::after，但若父元素未建立新层叠上下文，则 ::after 仍受父级内容层级约束）。
你原代码中 .primary-button { position: relative; z-index: 100; } 实际上创建了一个新的层叠上下文，而 .primary-button::after { z-index: -100; } 虽为定位元素，却仍属于该上下文内部——它无法突破父容器的内容层（尤其是文字和背景）的视觉覆盖。
✅ 正确解法：将伪元素移出按钮作用域，置于独立容器中。通过外层 div.btn-wrap 承载 ::after，按钮作为其子元素自然获得更高默认层叠优先级（无需额外 z-index），从而实现“渐变在下、按钮在上”的预期效果。
以下是推荐实现方案：
<div class="btn-wrap"> <button class="primary-button">Learn More</button> </div>
.btn-wrap {
position: relative;
display: inline-block;
border-radius: 13px; /* 与按钮一致，确保 ::after 圆角匹配 */
z-index: 1; /* 可选：显式声明层叠上下文根 */
}
.primary-button {
padding: 16px 32px;
background-color: #fff;
color: #333;
border: none;
border-radius: inherit;
margin: 0;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 700;
cursor: pointer;
outline: none;
}
.btn-wrap::after {
content: "";
position: absolute;
top: 6px;
left: 4px;
width: 102%;
height: 102%;
border-radius: inherit;
background: linear-gradient(
90deg,
rgba(167, 158, 252, 1) 20%,
rgba(138, 179, 252, 1) 80%
);
z-index: -1; /* 安全值，确保位于按钮下方 */
}
? 注意事项：
- 避免在按钮自身上滥用
z-index：它会意外创建层叠上下文，干扰预期层级； -
::after的top/left和width/height应配合border-radius: inherit精确对齐，防止圆角错位或裁剪； - 按钮需设
border: none并确保无其他干扰背景（如默认background-image）； - 若需响应式适配，建议将
.btn-wrap的偏移量（top/left）改为transform: translate()更稳定。
这一模式不仅解决当前问题，更是构建可复用、易维护的「带装饰背景按钮」组件的标准实践。
