如何在存在 CSS 变换（transform）时强制控制元素堆叠顺序？-html教程-PHP中文网

如何在存在 CSS 变换（transform）时强制控制元素堆叠顺序？

当父元素启用 3D 变换（如 transform: translateZ(0)）时，会创建新的层叠上下文（stacking context），导致子元素的 z-index 相对父级生效而非全局文档；本文详解其原理，并提供无需额外包裹、兼容性佳的纯 CSS 解决方案。

当父元素启用 3d 变换（如 `transform: translatez(0)`）时，会创建新的层叠上下文（stacking context），导致子元素的 `z-index` 相对父级生效而非全局文档；本文详解其原理，并提供无需额外包裹、兼容性佳的纯 css 解决方案。

CSS 的 z-index 并非“绝对深度值”，而是相对层叠上下文（stacking context）内的排序指令。一旦元素应用了某些属性（如 transform 带 3D 值、opacity 、<code>will-change: transform 等），浏览器会为其创建独立的层叠上下文——此时该元素内部所有子元素的 z-index 都仅在此上下文中生效，无法与外部兄弟元素跨上下文比大小。

在你的示例中，.black-box 添加了 transform: translateZ(0px)，触发了新层叠上下文；其子元素 <p></p> 的 z-index: 2 只能控制它在 .black-box 内部的层级（例如相对于同为子元素的 .red-box），但若 .red-box 是 .black-box 的同级兄弟元素（即 DOM 中位于 <div class="black-box"> 外部），那么它属于<strong>另一个层叠上下文</strong>（根上下文），二者无法直接通过 <code>z-index 比较优先级——此时实际渲染顺序由 HTML 结构顺序和默认层叠规则决定，z-index 失效。

✅ 正确解法不是寻找“比 z-index 更强”的属性（CSS 中并不存在），而是统一层叠上下文归属：

推荐方案：将 .red-box 移入 .black-box 内部（如答案所示），使其成为同一层叠上下文的子元素。此时 z-index 可正常比较：

<div class="black-box">
  <p>hello</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <div class="red-box"></div> <!-- 同级子元素，z-index 生效 -->
</div>

配合以下 CSS 即可精准控制：

.black-box {
  position: relative; /* 确保 absolute 定位的 red-box 相对于此定位 */
  transform: translateZ(0); /* 仍可保留，不影响内部 z-index 比较 */
}
.black-box p {
  position: relative; /* p 需有定位才能参与 z-index 排序 */
  z-index: 2;
}
.red-box {
  position: absolute;
  z-index: 1; /* 小于 p 的 2，自然居下 */
}

⚠️ 注意事项：

z-index 仅对定位元素（position 为 relative/absolute/fixed/sticky）有效，未定位的普通元素（如默认 static）忽略 z-index；
不要依赖 transform: translateZ(0) 来“强制提升层级”——它恰恰是创建隔离层叠上下文的元凶；
若必须保持 .red-box 为兄弟结构（如受框架限制），可改用 isolation: isolate 在父容器上显式创建独立上下文，再通过 z-index + position 统一管理，但复杂度更高，不推荐初学者使用。