table 元素直接加 z-index 无效，因其默认 position: static，而 z-index 仅对定位元素（relative/absolute/fixed）生效；需显式设置 position 才能启用层叠上下文。
table 元素直接加 z-index 为什么无效？
因为 table 默认是 position: static，而 z-index 对 static 元素完全不生效——浏览器直接忽略它。你看到“没反应”，不是 CSS 写错了，是根本没触发定位上下文。
常见错误现象：<table style="z-index: 999"> 在开发者工具里 computed 样式中 z-index 显示为 auto，position 仍是 static。
- 必须显式设置
position: relative（最常用）或absolute/fixed -
table是块级元素，加position: relative不会破坏表格结构，只启用层叠能力 - 别指望
tr或td单独设z-index就能盖住整个table：它们受父table的层叠上下文约束，除非你也给tr/td加position并确保其祖先没意外创建新上下文
position: relative 加在 table 上会不会影响布局？
不会破坏表格内部的行列对齐逻辑，但要注意：加了 position: relative 后，table 就成了一个潜在的层叠上下文创建者——如果它有 z-index 值（非 auto），它的所有子元素（tr、td）的 z-index 都只在这个 table 内部比较，无法和页面其他区域的元素直接比高低。
- 若只需让整张表“浮起来”盖住其他内容（比如遮罩层下的数据表），用
position: relative; z-index: 100即可 - 若想让某个
td突破表格边界悬浮（如 tooltip），必须给该td单独设position: relative或absolute，再配z-index - 避免在
table父容器上写transform或opacity: 0.99：这会让整张表被锁进新层叠上下文，即使table自己z-index: 9999，也盖不住外部z-index: 1的导航栏
表格与其他浮动组件（如弹窗、下拉菜单）层级冲突怎么办？
真正卡住的往往不是 table 本身，而是它所处的 DOM 位置和祖先链上的层叠上下文。比如一个带 filter: blur(1px) 的卡片包裹了 table，那这张表及其所有子元素都出不了这个“房间”。
立即学习“前端免费学习笔记（深入）”；
- 检查 Chrome DevTools → Layers 面板，看
table是否被包裹在意外的上下文里 - 临时移除可疑祖先的
transform、opacity、will-change等属性验证是否恢复 - 更稳妥的做法：把弹窗、下拉菜单等浮层类元素用 JS
appendChild到document.body底部——天然脱离原有上下文，靠 DOM 顺序和基础z-index分组就能稳住层级 - 用 CSS 自定义属性统一管理，例如
--z-table: 10、--z-dropdown: 200、--z-modal: 1000，避免散落的魔数导致冲突
用 absolute 定位表格时要注意什么？
一旦设 position: absolute，table 就脱离文档流，不再占位，可能引发周围内容“坍塌”或重叠。这不是 z-index 的问题，而是定位方式本身的副作用。
- 必须配合
top/left等偏移值才能准确定位，否则默认贴左上角 -
table-layout: fixed建议同步加上，防止内容撑开导致尺寸失控 - 若表格需响应式宽度，慎用
absolute：它会忽略父容器的max-width和padding，需手动计算并设width - 移动端 Safari 对
transform: translateZ(0)敏感，若为性能加了该属性，可能意外创建新上下文，让absolute表格被压住
z-index，而是谁在创建层叠上下文、你的 table 落在哪个“房间”里——DOM 结构 + 祖先 CSS 属性共同决定最终渲染顺序，单看一个 table 元素的样式，永远不够。 
