table元素直接加z-index无效，因为其默认position为static，而z-index仅对relative、absolute、fixed或sticky定位元素生效；tr/td/th等表格单元格无法可靠设置z-index，因其属于表格隐式堆叠上下文且浏览器对其定位支持极弱。
table元素直接加z-index为什么无效？
因为 <table> 默认是 position: static，而 z-index 对 static 元素完全不生效。哪怕你给 <table> 写了 z-index: 999，浏览器也会直接忽略它。
常见错误写法：
.my-table {
z-index: 999; /* 没用，除非加上 position */
}- 必须显式设置
position（如relative、absolute或sticky）才能启用z-index -
position: relative最安全：不脱离文档流，适合微调表格层级 - 避免对整个
<table>用position: absolute—— 它会脱离流，破坏表格布局语义和响应式表现 - 如果只是想让表格“浮”在其他内容上（比如遮罩层下），更推荐把表格包裹进一个带定位的容器里，而不是直接动
<table>
tr、td、th 能不能单独设z-index？
不能，或者说「设了也白设」。原因有二：
-
<tr>、<td>、<th>是表格内部渲染模型的一部分，浏览器对其应用position的支持极弱；即使强行设position: relative+z-index，多数浏览器会忽略或降级处理 - 它们天然属于父
<table>创建的隐式堆叠上下文，且无法独立创建新上下文 —— 所以子单元格的z-index值根本不会参与层级计算 - 真正能可靠控制层级的，只有
<table>自身，或其外部包裹容器（如<div class="table-wrapper">）
想让某一行高亮在最前？别给 <tr> 加 z-index，而是用 background-color + box-shadow 视觉模拟，或把目标行抽出来用 position: absolute 单独定位（但需放弃表格语义）。
立即学习“前端免费学习笔记（深入）”；
表格和弹窗/遮罩层重叠时谁在上面？
不是看谁的 z-index 数字大，而是看它们是否属于同一个堆叠上下文。绝大多数冲突都源于这个误判。
- 如果遮罩层是
position: fixed; z-index: 1000，而表格只是普通文档流里的<table>（没设position），那遮罩层一定在上面 —— 因为表格连自己的堆叠上下文都没创建 - 但如果表格被包在一个
position: relative; z-index: 2000的<div>里，而遮罩层是另一个position: fixed; z-index: 1500的元素，那表格反而会盖住遮罩层（因为它的父容器堆叠上下文层级更高） - iOS Safari 下尤其危险：只要表格容器用了
transform: translateZ(0)或will-change: transform，就会意外创建新堆叠上下文，导致原本该被遮罩的表格突然“浮”出来
调试建议：Chrome DevTools → Elements 面板 → 右键元素 → 「Show stacking order」，或打开 Layers 面板，直接看上下文边界线。
怎么让表格稳定地显示在浮层之下？
最稳妥的做法不是硬调数字，而是结构上隔离层级关系。
- 把遮罩层和弹窗都 append 到
document.body底部，确保它们处于根堆叠上下文，不受任何父容器干扰 - 给表格容器设
position: relative时，z-index别超过 99；浮层统一从 100 起跳（例如--z-overlay: 100、--z-modal: 1000） - 绝对不要用
z-index: 999999—— 它掩盖了上下文问题，还可能在旧版 Safari 中溢出为负数 - 如果表格嵌在 Vue/React 组件里，检查框架是否通过内联样式覆盖了你的
position；必要时用!important锁定position: relative
真正卡住的从来不是数字大小，而是哪个父元素悄悄当了“小 boss”。查 Computed 面板里的 stacking context 字段，比反复改 z-index 管用十倍。
