z-index不能直接用于等表格元素，因其默认display值不支持定位；正确做法是在内嵌套并对其设置position:relative和z-index，或对本身设position:relative后应用z-index。
z-index 不能直接用于 <table>、<code><tr>、<code><td> 等原生表格元素——除非它们被显式设为定位元素，且脱离表格渲染模型。<hr>
<h3>为什么直接给 <code><td> 加 <code>z-index 没用？
浏览器对表格元素有特殊渲染规则：<tr> 和 <code><td> 默认是 <code>display: table-row / table-cell，它们不参与常规层叠上下文，即使你写了 position: relative，也常被表格布局机制压制或忽略。
-
z-index只对position不为static且display值支持定位的元素生效；table-cell不在该列表中（CSS 规范明确排除） - 给
<td> 设 <code>position: relative后，它可能“看似”定位了，但实际仍受表格盒模型约束，z-index被静默丢弃 - 开发者工具里能看到
z-index在 Computed 样式中显示为auto，哪怕你写了999 - 在
<td> 内部嵌套一个 <code><div> 或 <code><span></span>（设display: inline-block），然后给这个容器加position: relative+z-index - 如果要覆盖整行或跨列区域，用
position: absolute的<div> 并挂到 <code><table> 的父容器上（需确保父容器有 <code>position: relative） - 避免在
<tr> 上设 <code>position—— 它会破坏表格行高计算，导致高度塌陷或错位表格整体作为「浮动层」时，
z-index怎么设才有效？只有当整个
<table> 元素本身成为定位元素时，<code>z-index才起作用。- 给
<table> 加 <code>position: relative（最常用，不影响表格结构）或position: absolute（脱离文档流） - 确保其父容器没有意外创建层叠上下文（比如
opacity: 0.99、transform: translateZ(0)），否则该<table> 的 <code>z-index只在父容器内部生效 - 若表格是响应式组件的一部分（如 Vue/React 中动态渲染），检查框架是否注入了内联样式覆盖了你的
position - 现象：
<table> 写了 <code>z-index: 1000还被遮住 → 检查它的position是否真为relative（不是static，也不是被 JS 动态清空） - 现象：表格里弹出的 Tooltip 总是沉底 → 它很可能被包裹它的
<td> 或 <code><tr> 的层叠上下文锁死了，把 Tooltip 移到 <code>下更可靠 - 快速验证：临时给目标表格加个
outline: 2px solid red，再加position: relative，看 outline 是否还贴着表格边缘——如果不是，说明定位已生效，z-index才可能起效
常见翻车现场和验证方法
调试时别只看样式面板，重点查 Computed 结果。
表格的层叠控制本质是「避开表格渲染陷阱」，而不是硬刚
<td> 的 <code>z-index。真正要动的，往往是它的包装容器或父级定位上下文。 - 给
想让表格内某块内容「浮起来」，正确做法是什么？
绕过表格元素本身的限制：把需要分层的内容用普通块级容器包一层，再对其定位和设 z-index。
