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