当对带有伪元素的父容器应用 scale 变换时，伪元素会随父级一同缩放，但其 z-index 在父级堆叠上下文中失效——根本原因是伪元素无法脱离父元素的层叠上下文；正确解法是将视觉样式（如边框、背景）移至子元素，并通过合理设置 z-index 分层控制。
当对带有伪元素的父容器应用 `scale` 变换时，伪元素会随父级一同缩放，但其 `z-index` 在父级堆叠上下文中失效——根本原因是伪元素无法脱离父元素的层叠上下文；正确解法是将视觉样式（如边框、背景）移至子元素，并通过合理设置 `z-index` 分层控制。
在 CSS 布局中，::before 和 ::after 伪元素默认属于其宿主元素（即父元素）的层叠上下文（stacking context）。一旦父元素设置了 transform（如 scale），它会自动创建一个新的层叠上下文——此时，伪元素的 z-index 仅在该新上下文中生效，无法与父元素外部或其他兄弟元素进行全局层级比较，更无法“穿透”到父级容器的上层。这也是为什么直接在 .card:hover::before 中调整 z-index 无效的根本原因。
✅ 正确实践：分层结构 + 显式堆叠控制
解决方案不是强行提升伪元素的 z-index，而是重构 DOM 与 CSS 结构，将内容层、装饰层、阴影/背景层分离：
- .card：作为布局容器，仅负责定位、变换和定义层叠上下文；
- .card-content：承载主体视觉样式（边框、背景、圆角），并设置 z-index: 1 确保显示在伪元素之上；
- .card::before：作为底层装饰（如位移阴影），无需 z-index（默认为 auto，自然位于内容层之下）。
<div class="container">
<div class="card">
<div class="card-content"></div>
</div>
</div>.container {
height: 100%;
min-height: 100vh;
display: grid;
place-items: center;
}
.card {
width: 300px;
height: 120px;
position: relative;
transition: scale 250ms ease;
}
.card-content {
width: 100%;
height: 100%;
border: 4px solid #000;
border-radius: 20px;
background-color: #fff;
position: relative;
z-index: 1; /* 确保内容层压在 ::before 之上 */
}
.card:hover {
scale: 1.1;
}
.card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
transform: translate(10px, 10px);
background-color: #000;
border-radius: 20px;
/* 不设 z-index —— 默认渲染顺序已在 .card-content 下方 */
}⚠️ 关键注意事项
- transform（包括 scale）会强制创建新的层叠上下文，这是 CSS 规范行为，不可绕过；
- 伪元素无法通过 z-index 跳出其宿主元素的层叠上下文，因此「在父元素内调高伪元素 z-index」无法使其覆盖父元素自身内容；
- 若需更复杂阴影效果（如模糊、多层偏移），推荐使用 box-shadow 替代 ::before，语义更清晰且无层级陷阱；
- 所有 z-index 值仅在同一层叠上下文内有效；跨上下文比较无意义——务必确认目标元素是否处于同一 stacking context 根节点下。
通过结构化分层与语义化 DOM，既能保持视觉动效的完整性，又能精准控制各元素的绘制顺序，这才是响应式、可维护 UI 的专业实现方式。
