CSS 中使用 scale 变换时伪元素 zIndex 失效的解决方案-html教程-PHP中文网

当对父元素应用 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 本身只负责变换与定位控制，而视觉内容与装饰层分属不同、可独立控制的层叠层级。

以下是优化后的完整实现：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<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; /* 确保内容层在伪元素之上 */
}

? 关键要点总结：