z-index在table元素上无效，因其默认position:static且表格渲染模型不支持z-index跨单元格生效；需将高亮内容抽离为absolute定位层覆盖于relative容器上，或改用display:table的div结构实现可控层级。
z-index 在 table 元素上根本不起作用
直接给 <table>、<tr> 或 <td> 设置 z-index 是无效的，因为这些元素默认是 position: static，而 z-index 只对已定位元素（relative、absolute、fixed、sticky）生效。更关键的是：表格内部的渲染模型（table formatting context）天然不支持子元素通过 z-index 跨行/跨列“浮出”——即使你强行加了 position: relative 和 z-index，浏览器仍会按表格单元格的绘制顺序（从左到右、从上到下）覆盖，z-index 被忽略。
想让表格内容“浮起来”，得绕开 table 布局本身
真正可行的方案是把需要突出显示的内容抽离出表格结构，用定位层覆盖在表格上方：
- 给包裹
<table>的容器（如<div class="table-wrapper">）设position: relative - 把要高亮的单元格内容（比如编辑态输入框、Tooltip、选中状态蒙层）用
position: absolute插入到该容器内，并用top/left精确对齐到目标单元格位置 -
z-index设在绝对定位的覆盖层上（如z-index: 100），而非<td>上 - 避免给
.table-wrapper加transform、opacity < 1或filter，否则它会创建新层叠上下文，把覆盖层锁死在局部
为什么给 <td> 加 position:relative + z-index 还是没用
常见错误操作：直接给 <td> 写 position: relative; z-index: 999。问题在于：
-
<td>是表格内部格式化元素，其position值被 CSS 表格规范限制，relative仅允许微调自身位置，不触发独立层叠上下文 - 即使生效，它的
z-index也只在当前行/当前表格内部比较，无法盖过同级的其他<td>，更无法压住表格外的弹窗或导航栏 - Chrome/Firefox 实际渲染中，表格单元格的堆叠顺序由 HTML 顺序和表格算法决定，
z-index不参与计算
替代方案：用 div 模拟表格并保留 z-index 控制权
如果业务逻辑允许，放弃原生 <table>，改用 display: table 系列声明（table、table-row、table-cell）构建视觉表格：
立即学习“前端免费学习笔记（深入）”；
- 每个“单元格”是普通
<div>，可自由设position: relative和z-index - 父容器不触发新层叠上下文时，子元素的
z-index能跨行比较（例如让第2行第3列的 div 盖住第1行第1列） - 需手动处理边框合并、文字对齐、响应式断点等原生 table 自带的能力，成本较高
- 适合小规模数据展示或强交互场景（如可拖拽排序的表格行）
真正卡住的往往不是数值大小，而是误以为 z-index 能穿透表格的渲染边界——它不能。要么把要盖的东西移出来，要么把整个表格换成可控的 div 结构。
