z-index无效主因是未设置position属性；必须配合relative、absolute、fixed或sticky才能生效，且需注意层叠上下文限制。
z-index 为什么写了没反应？先看 position
直接写 z-index: 999 却压不住旁边元素，90% 是因为没设 position。CSS 规范明确要求：z-index 对 position: static（默认值）完全无效，浏览器会直接忽略它。
必须显式设置以下之一才能激活 z-index：
-
position: relative：最常用，不脱离文档流，适合微调层级而不破坏布局 -
position: absolute：需确保父容器已设position: relative，否则会相对视口定位，容易“飘走” -
position: fixed或position: sticky：同样有效，但语义和行为不同，别乱换
错误示例：.btn { z-index: 100; } → 无效；正确写法：.btn { position: relative; z-index: 100; }
表格里怎么让某行或某单元格“浮起来”？别碰 和
<tr> 和 <code><td> 默认是 <code>position: static，且属于表格格式化上下文，强行加 position 会被浏览器忽略或重置——尤其在标准模式下，可能引发塌陷、边框错位等渲染异常。
安全做法是用容器包裹内容：
- 想高亮某单元格？给
<td> 内部套一层 <code><div class="highlight">，再设 <code>position: relative; z-index: 10
- 想让整行悬浮？不要给
<tr> 加 <code>position，改用 transform: translateZ(0) 强制创建独立层叠上下文，再通过子容器控制层级
- 绝对避免在
<table> 上直接写 <code>z-index：它本身不生效，必须先加 position: relative
明明 z-index 很大，还是被弹窗盖住？查层叠上下文
一个 z-index: 9999 的按钮被 z-index: 10 的模态框盖住，不是数字不够大，而是它的父容器悄悄创建了新层叠上下文，把它的层级比较范围锁死在内部。
这些 CSS 属性会触发新层叠上下文（常被忽略）：
-
opacity: 0.99（哪怕只是 0.99，不是 1）
-
transform: scale(1)、translateX(0) 等任何 transform 值
-
filter: blur(0.5px)、will-change: transform
isolation: isolate
调试建议：
- 打开 Chrome DevTools → Layers 面板，看目标元素是否被框在一个孤立“层”里
- 临时删掉可疑父级样式，确认层级是否恢复
- 真要保动画又需全局层级？把弹窗类元素（如
modal、tooltip）用 document.body.appendChild() 动态插入，彻底脱离原有 DOM 层级
@layer 不是 z-index 的替代品，别混用
@layer 控制的是 CSS 规则的**加载顺序和优先级**，不是元素渲染时的 Z 轴堆叠。它和 z-index 完全不在一个维度上。
常见误用：
- 以为写了
@layer components { .btn { z-index: 100; } } 就能“提升按钮层级”——其实只是把这条规则放进 components 层，z-index 是否生效仍取决于 position 和层叠上下文
- 第三方库（如 Ant Design）的 CSS 默认落在未命名顶层，天然压过你所有
@layer，必须用 @import "antd.css" layer(framework); 显式收编
-
@layer 声明必须放在 CSS 文件最顶部，前面不能有 @import、变量定义或注释带样式内容，否则整条规则被硬性截断
真正决定谁盖谁的，从来不是你写了多大的数字，而是它在哪一层叠上下文中，以及那个上下文的根是谁。
<tr> 和 <code><td> 默认是 <code>position: static，且属于表格格式化上下文，强行加 position 会被浏览器忽略或重置——尤其在标准模式下，可能引发塌陷、边框错位等渲染异常。
安全做法是用容器包裹内容：
- 想高亮某单元格？给
<td> 内部套一层 <code><div class="highlight">，再设 <code>position: relative; z-index: 10 - 想让整行悬浮？不要给
<tr> 加 <code>position，改用transform: translateZ(0)强制创建独立层叠上下文，再通过子容器控制层级 - 绝对避免在
<table> 上直接写 <code>z-index：它本身不生效，必须先加position: relative明明 z-index 很大，还是被弹窗盖住？查层叠上下文
一个
z-index: 9999的按钮被z-index: 10的模态框盖住，不是数字不够大，而是它的父容器悄悄创建了新层叠上下文，把它的层级比较范围锁死在内部。这些 CSS 属性会触发新层叠上下文（常被忽略）：
-
opacity: 0.99（哪怕只是 0.99，不是 1） -
transform: scale(1)、translateX(0)等任何 transform 值 -
filter: blur(0.5px)、will-change: transform isolation: isolate
调试建议：
- 打开 Chrome DevTools → Layers 面板，看目标元素是否被框在一个孤立“层”里
- 临时删掉可疑父级样式，确认层级是否恢复
- 真要保动画又需全局层级？把弹窗类元素（如
modal、tooltip）用document.body.appendChild()动态插入，彻底脱离原有 DOM 层级
@layer 不是 z-index 的替代品，别混用
@layer控制的是 CSS 规则的**加载顺序和优先级**，不是元素渲染时的 Z 轴堆叠。它和z-index完全不在一个维度上。常见误用：
- 以为写了
@layer components { .btn { z-index: 100; } }就能“提升按钮层级”——其实只是把这条规则放进 components 层，z-index是否生效仍取决于position和层叠上下文 - 第三方库（如 Ant Design）的 CSS 默认落在未命名顶层，天然压过你所有
@layer，必须用@import "antd.css" layer(framework);显式收编 -
@layer声明必须放在 CSS 文件最顶部，前面不能有@import、变量定义或注释带样式内容，否则整条规则被硬性截断
真正决定谁盖谁的，从来不是你写了多大的数字，而是它在哪一层叠上下文中，以及那个上下文的根是谁。
-
