为什么设置z-index的绝对定位提示框移出表格后会被容器遮挡

问题根本原因 #

该问题与z-index的绝对值大小无关，核心是两类常见场景导致：

• 堆叠上下文隔离：z-index的生效范围仅限当前元素所属的堆叠上下文。如果提示框的任意祖先元素创建了新的堆叠上下文、且该祖先元素的堆叠层级低于表格容器，那么提示框的z-index设置再高也无法突破祖先的层级上限，自然会被表格遮挡。
• 容器溢出裁剪：如果表格容器或提示框的祖先元素设置了overflow: hidden/auto/scroll属性，所有超出容器范围的内容都会被强制裁剪，和z-index数值无关。

解决方案 #

1. 检查溢出裁剪属性
   排查表格容器、提示框所有祖先元素的overflow配置，若不需要滚动效果，将对应位置的overflow: hidden修改为overflow: visible即可解决裁剪问题。

2. 调整堆叠上下文层级
   如果确认是堆叠上下文隔离导致的问题，可二选其一处理：

• 给表格容器设置position: relative+z-index: 1，再给提示框的直接父元素设置position: relative+z-index: 2，保证提示框所属的整个堆叠上下文层级高于表格即可。
• 把提示框元素直接挂载到body根节点下，脱离表格相关的DOM层级结构，从根源上避开父级堆叠上下文的限制，这也是主流前端组件库中Tooltip组件的通用实现方案。

3. 补充优化样式代码
   你当前的伪元素仅设置了top定位，缺少left/right偏移属性，部分浏览器下可能出现定位异常，建议补充调整：

.new .tooltip-container:before {
    position: absolute;
    width: 100px;
    height: 30px;
    content: "";
    top: -10px;
    left: 0; /* 可根据实际展示需求调整偏移值 */
    background: #333333;
    z-index: 100; /* 无需设置过高的z-index数值，层级够用即可，极端大的数值部分老旧浏览器无法正常识别 */
}

内容的提问来源于stack exchange，提问作者Артём Крупский