z-index在table元素上无效，因其默认position:static且表格渲染模型不支持z-index跨单元格生效；需将高亮内容抽离为absolute定位层覆盖于relative容器上，或改用display:table的div结构实现可控层级。

z-index 在 table 元素上根本不起作用

直接给 <table>、<code><tr> 或 <code><td> 设置 <code>z-index 是无效的，因为这些元素默认是 position: static，而 z-index 只对已定位元素（relative、absolute、fixed、sticky）生效。更关键的是：表格内部的渲染模型（table formatting context）天然不支持子元素通过 z-index 跨行/跨列“浮出”——即使你强行加了 position: relative 和 z-index，浏览器仍会按表格单元格的绘制顺序（从左到右、从上到下）覆盖，z-index 被忽略。

想让表格内容“浮起来”，得绕开 table 布局本身

真正可行的方案是把需要突出显示的内容抽离出表格结构，用定位层覆盖在表格上方：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 给包裹 <table> 的容器（如 <code><div class="table-wrapper">）设 <code>position: relative
• 把要高亮的单元格内容（比如编辑态输入框、Tooltip、选中状态蒙层）用 position: absolute 插入到该容器内，并用 top/left 精确对齐到目标单元格位置
• z-index 设在绝对定位的覆盖层上（如 z-index: 100），而非 <td> 上 <li>避免给 <code>.table-wrapper 加 transform、opacity 或 <code>filter，否则它会创建新层叠上下文，把覆盖层锁死在局部

为什么给 加 position:relative + z-index 还是没用

常见错误操作：直接给 <td> 写 <code>position: relative; z-index: 999。问题在于：

• <td> 是表格内部格式化元素，其 <code>position 值被 CSS 表格规范限制，relative 仅允许微调自身位置，不触发独立层叠上下文
• 即使生效，它的 z-index 也只在当前行/当前表格内部比较，无法盖过同级的其他 <td>，更无法压住表格外的弹窗或导航栏 <li>Chrome/Firefox 实际渲染中，表格单元格的堆叠顺序由 HTML 顺序和表格算法决定，<code>z-index 不参与计算

替代方案：用 div 模拟表格并保留 z-index 控制权

如果业务逻辑允许，放弃原生 <table>，改用 <code>display: table 系列声明（table、table-row、table-cell）构建视觉表格：

• 每个“单元格”是普通 <div>，可自由设 <code>position: relative 和 z-index
• 父容器不触发新层叠上下文时，子元素的 z-index 能跨行比较（例如让第2行第3列的 div 盖住第1行第1列）
• 需手动处理边框合并、文字对齐、响应式断点等原生 table 自带的能力，成本较高
• 适合小规模数据展示或强交互场景（如可拖拽排序的表格行）

真正卡住的往往不是数值大小，而是误以为 z-index 能穿透表格的渲染边界——它不能。要么把要盖的东西移出来，要么把整个表格换成可控的 div 结构。