z-index 对 table 元素无效，因其默认 position: static；需为菜单容器设 position: absolute/fixed 并配 z-index，同时避免父级创建新层叠上下文（如 transform、opacity
z-index 对 table 元素本身无效
直接给 <table> 或 <code><tr>、<code><td> 设置 <code>z-index 不会生效，因为这些元素默认是 position: static，而 z-index 只对定位元素（position 为 relative、absolute、fixed 或 sticky）起作用。
常见错误现象：菜单弹出后被表格行遮挡，即使设置了 z-index: 9999 也没用。
- 必须给菜单容器（如
<div class="dropdown-menu">）显式设置 <code>position: absolute或position: fixed，再配z-index - 确保菜单的父容器没有
overflow: hidden或transform等创建新层叠上下文（stacking context）的属性，否则z-index会被截断 - 如果菜单插在
<td> 内部，需把 <code><td> 设为 <code>position: relative，让绝对定位菜单以它为参考点表格内下拉菜单被同行其他单元格盖住
这是典型层叠上下文嵌套问题：当整行
<tr> 或整个 <code><table> 被设了 <code>transform、opacity 、<code>filter等，就会创建新的层叠上下文，导致其内部所有子元素的z-index都被限制在这个上下文内。使用场景：带滚动/动画的可编辑表格、使用
transform: translateY()实现 hover 浮动效果的行。- 检查
<tr> 和 <code><table> 是否有 <code>transform、filter、will-change等属性，有则移除或改用其他方式实现效果 - 把菜单 DOM 移到
下（用 Portal 模式），脱离表格的层叠上下文束缚 - 若必须保留在表格内，可给该
<td> 加 <code>isolation: isolate，强制它创建独立层叠上下文（兼容性注意：IE 不支持）移动端 Safari 中 dropdown-menu 位置错乱且层级失效
iOS Safari 对
position: absolute在<table> 内的定位支持不一致，尤其配合 <code>transform或overflow-scrolling: touch时，常导致菜单定位偏移或被裁剪。性能影响：强行用
z-index+transform: translateZ(0)强制硬件加速，反而可能加剧渲染异常。- 避免在
<td> 上用 <code>transform；改用top/left+position: relative控制位移 - 菜单容器加
contain: layout paint（现代浏览器）或-webkit-overflow-scrolling: auto防止 iOS 滚动穿透干扰 - 测试时务必在真机上验证，模拟器常无法复现该问题
- 打开 DevTools → Elements 面板，右键菜单元素 → “Show all ancestors with stacking context”（Chrome 支持）
- 观察从菜单向上直到
的每个祖先，是否有z-index值更低的层叠上下文“框住”了它 - 临时给菜单加
outline: 2px solid red和background: rgba(255,0,0,0.1)，确认是否被裁剪或错位
如何验证当前菜单是否处于顶层层叠上下文
不是看
z-index数值大小，而是看它所属的最近层叠上下文是否足够“高”。可快速定位问题：
真正卡住的问题往往不在菜单自己，而在它上面两三级的某个
<div> 或 <code><tr> 悄悄创建了隔离的层叠上下文。这点容易被忽略，但几乎占了 70% 的同类问题。</tr> - 避免在
- 检查
