不可靠，除非严格控制父容器的position上下文；需设.tab-container为relative，各面板absolute+top/left/width/height，并配合visibility/opacity+pointer-events实现动画与交互控制。
用 position: absolute + z-index 控制标签页显隐是否可靠？
不可靠，除非你严格控制父容器的 position 上下文。直接对 tab 内容区设 position: absolute，又没给父级加 position: relative，所有内容会相对于 viewport 定位，互相重叠错位。
正确做法是让每个 tab 面板共用同一个定位上下文：
- 外层容器（如
.tab-container）必须设position: relative - 每个面板（
.tab-panel）设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 用
z-index控制显示顺序，但只靠它“切换”不够 —— 更推荐结合visibility: hidden/visible或opacity: 0/1+pointer-events: none/auto来禁用交互
为什么只用 display: none 切换 tab 面板会破坏动画？
因为 display 是 CSS 中的“离线属性”：浏览器渲染时会跳过 display: none 元素的所有盒模型计算和绘制，无法对其做过渡（transition）或动画（@keyframes）。
想加淡入、滑动等效果，得换可控的视觉属性：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity: 0+visibility: hidden配合transition: opacity 0.2s - 用
transform: translateY(-10px)+opacity: 0实现入场动画 - 切记：隐藏时必须同时设
visibility: hidden，否则opacity: 0的元素仍响应点击
tab 切换时内容区高度不一致，导致父容器抖动怎么办？
这是绝对定位 + 动态内容最常被忽略的问题：不同 tab 面板高度不同，但父容器因内部元素脱离文档流而塌陷，外部布局跟着跳。
解决思路不是“撑高”，而是“预留空间”或“同步高度”：
- 给
.tab-container设固定高度（适合内容高度可控的场景） - 用 JS 监听当前激活面板，把它的
scrollHeight赋给容器（el.style.minHeight = activePanel.scrollHeight + 'px'） - 更轻量的做法：所有面板统一设
min-height: 200px（根据业务最低内容预估）
移动端 Safari 下 z-index 失效、标签错层怎么查？
不是 bug，是 Safari 对 stacking context 的触发更敏感。常见诱因有：transform、opacity < 1、will-change 等属性会新建 stacking context，导致子元素的 z-index 只在该上下文中生效。
排查重点：
- 检查 tab 按钮和面板是否意外被某个父级（比如带
transform: translateZ(0)的导航栏）隔离了 stacking context - 避免在 tab 容器上滥用
opacity或filter—— 它们会创建新层 - 必要时给容器加
transform: translateZ(0)强制提升为 stacking context 根，再统一管理子项z-index
层级问题从来不是数字大小决定的，而是 stacking context 的嵌套关系决定的 —— 这点在多层嵌套 tab 或含 modal 的页面里特别容易翻车。
