tab内容被遮挡是因为z-index仅在同层叠上下文中生效；需为tab容器设position:relative创建独立上下文，并用display:none隐藏非激活面板，而非依赖z-index负值。
为什么 tab 切换内容会“盖不住”其他元素？
常见现象是：点击某个 tab 后，对应的内容面板没显示在最上层，反而被导航栏、弹窗、固定定位的按钮遮挡。这不是 tab 逻辑错了，而是 z-index 作用域没理清——z-index 只在**同一个 stacking context（层叠上下文）内有效**。外层容器如果没触发新的层叠上下文（比如没设 position: relative 或 transform），子元素的 z-index 再大也跨不出去。
tab 内容区必须和触发它的 tab 按钮同属一个 stacking context
否则即使给 .tab-pane 设了 z-index: 999，它也可能被父级 .header（带 z-index: 100）整体压住。正确做法是：
- 给整个 tab 容器（如
.tab-container）设position: relative，让它成为独立 stacking context - 确保 tab 按钮（
.tab-item）和内容面板（.tab-pane）都直接在这个容器内，不被中间某层带z-index的父元素隔开 - 避免在 tab 容器内部再嵌套一个带
position: absolute+z-index的浮层（比如 tooltip），否则它会创建新 stacking context，打乱原有层级
用 z-index 控制 tab 面板显隐时的常见错配
有人试图用 z-index 替代 display 或 visibility 来“隐藏”非激活面板，这是危险的：
-
z-index: -1不会让元素不可见，只是把它塞到根层叠上下文后面——如果父容器没设overflow: hidden，它仍可能从边缘露出来 - 多个
.tab-pane共享同一父容器时，只靠z-index无法保证“仅一个可见”，因为它们都在同一 stacking context 中，z-index只决定谁在上，不控制是否渲染 - 真正该做的：用
display: none移出渲染流，再配合z-index确保当前激活面板在所有兄弟面板之上（比如统一设z-index: 2，未激活的设z-index: 1）
嵌套 tab 场景下 z-index 必须分层管理
三层嵌套 tab（main → sub → detail）中，每层容器都要有自己独立的 z-index 范围，不能全堆在 1–100 里混用：
- 外层
.main-tab-container：设z-index: 10 - 中层
.sub-tab-container（位于某个.tab-pane内）：设z-index: 20，且其父.tab-pane必须有position: relative - 内层
.detail-tab-container：设z-index: 30，同样依赖上层容器已建立 stacking context - 别让某层突然用
z-index: 9999—— 这会把整层内容顶到全局最上，破坏嵌套隔离
最容易被忽略的是：只要容器加了 transform、opacity、will-change 或 filter，哪怕没写 z-index，也会自动创建 stacking context。检查 DOM 时发现层级异常，先看父元素有没有这些属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
