当对父元素应用 CSS scale 变换时，其伪元素（如 ::before）会因层叠上下文重置而丢失预期的 z-index 层级关系；根本解法是将视觉样式（边框、背景等）移至独立子元素，并通过合理设置 z-index 和定位层级来重建可控的堆叠顺序。
当对父元素应用 css `scale` 变换时，其伪元素（如 `::before`）会因层叠上下文重置而丢失预期的 `z-index` 层级关系；根本解法是将视觉样式（边框、背景等）移至独立子元素，并通过合理设置 `z-index` 和定位层级来重建可控的堆叠顺序。
在 CSS 中，scale 是一种 变换（transform），而任何具有非 none 值的 transform 属性（包括 scale、rotate、translate 等）都会为该元素创建一个新的局部层叠上下文（stacking context）。这意味着：
- 该元素内部的所有子元素（含伪元素 ::before/::after）的 z-index 将仅在该新上下文中生效，无法与外部兄弟元素或祖先元素竞争全局层叠顺序；
- 更关键的是：z-index 在非定位元素上无效，且伪元素默认不参与文档流，其层叠行为高度依赖父容器的上下文状态。
因此，在原始代码中，.card:hover { scale: 1.1 } 触发了新的层叠上下文，而 .card::before 的 z-index: -1 实际被限制在 .card 的局部上下文中——它确实“在卡片下方”，但这个“下方”仅相对于 .card 自身内容而言，而非页面整体布局。此时即使给 .card 设置 z-index: 2，也无法让 ::before 脱离该上下文去覆盖其他元素（或被正确遮挡）。
✅ 正确做法是解耦结构与样式层级：
将原本由 .card 承担的边框、背景、圆角等视觉样式，迁移至一个明确的子容器（如 .card-content），并赋予其 position: relative 和显式 z-index；同时让伪元素保留在 .card 上，作为纯粹的装饰层（如阴影偏移效果）。这样，.card 本身只负责变换与定位控制，而视觉内容与装饰层分属不同、可独立控制的层叠层级。
以下是优化后的完整实现：
<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: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 下方 */
}
.card-content {
position: relative;
width: 100%;
height: 100%;
border: 4px solid #000;
border-radius: 20px;
background-color: #fff;
z-index: 1; /* 确保内容层在伪元素之上 */
}? 关键要点总结：
立即学习“前端免费学习笔记（深入）”；
- ❌ 避免在具有 transform 的元素上直接依赖 z-index 控制伪元素与其他元素的相对层级；
- ✅ 使用嵌套子元素分离「变换容器」与「视觉内容」，通过 z-index + position 显式定义层级关系；
- ✅ 伪元素 ::before/::after 适合承担纯装饰性角色（如阴影、浮雕、蒙版），而非核心布局或交互内容；
- ⚠️ 若需更复杂阴影效果，建议优先考虑 box-shadow（性能更好、层级更可控），仅在需要精确位移/形状控制时才用伪元素模拟。
此方案不仅解决了 z-index 失效问题，还提升了结构语义性与样式的可维护性，是现代 CSS 动效开发中的推荐实践。
