z-index无效时，先检查父容器是否创建层叠上下文；若未触发新上下文，子元素z-index在根上下文中无效，需为父容器设position:relative等以建立独立上下文。
z-index 无效时，先看父容器有没有创建层叠上下文
双栏布局中内容被遮挡，90% 的情况不是 z-index 写小了，而是它根本没生效。因为 z-index 只在同一个层叠上下文（stacking context）里起作用。如果左右两栏的父容器没触发新上下文，哪怕给右栏设 z-index: 999，它也盖不过顶部固定导航栏（比如 .header 带 z-index: 100）。
必须给双栏的直接父容器加 position: relative（或 transform、opacity 等），才能让它成为独立的层叠上下文起点。否则子元素的 z-index 全部在根上下文中比大小，毫无意义。
- 错误写法：
.container { /* 没有 position */ }→ 子元素z-index形同虚设 - 正确写法：
.container { position: relative; z-index: 0; }→ 明确建立新上下文 - 注意：加了
transform: translateZ(0)或will-change: transform也会隐式创建上下文，但不如position: relative直观可控
左右两栏之间谁在前？别只靠 z-index
当左右两栏同属一个父容器且都设置了 z-index，渲染顺序其实由 HTML 顺序 + z-index 共同决定：DOM 中后出现的元素默认在前；若 z-index 不同，则按数值高低覆盖。
但更稳妥的做法是——让视觉层级和 DOM 顺序一致，避免依赖 z-index 拼数值：
立即学习“前端免费学习笔记（深入）”；
- 左栏先写，右栏后写 → 默认右栏在上，无需额外
z-index - 如果必须左栏盖右栏，就交换 HTML 顺序，或给左栏加
z-index: 2、右栏加z-index: 1（注意两者必须在同一上下文内） - 绝对定位的栏（如悬浮工具栏）要单独处理：它脱离文档流，
z-index必须配合position: absolute和父容器的position: relative才有效
tab 切换、弹窗、侧边栏共存时的分层陷阱
后台类双栏页面常嵌套 tab、抽屉菜单、通知浮层，这时容易出现“点了 tab，内容被侧边栏挡住”或“弹窗被视频盖住”的问题。核心矛盾是层叠上下文被意外打断。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
典型错误链：
-
.sidebar设了z-index: 100，但它的父容器没position→ 它和.main-content在同一上下文竞争 -
.tab-pane被display: none隐藏，但某个兄弟面板用了z-index: -1→ 它仍可能从容器边缘漏出来（尤其当父容器overflow: visible） - 视频区域用了
position: absolute+z-index: 50，而弹窗是position: fixed+z-index: 999→ 正常，但如果视频父容器加了transform，就会新建上下文，把弹窗锁死在它下面
关键原则：每层交互容器（tab 区、抽屉、弹窗）都应有自己的 position: relative + 合理 z-index 范围，不要全堆在 999/9999 上。
视频区域盖不住其他内容？检查 playsinline 和 z-index 配合
移动端 iOS Safari 对 <video></video> 有特殊限制：不加 playsinline 会强制全屏播放；即使加了，若父容器没设 position: relative，z-index 也无法控制其层级。
常见现象：右侧视频区明明写了 z-index: 1000，却仍被左侧导航栏遮住。
- 确保
<video></video>的直接父容器（如.video-container）有position: relative -
<video></video>自身设position: relative或absolute，再配z-index（仅当需要压过同级元素时） - 避免对
<video></video>使用transform，否则会新建层叠上下文，导致z-index失效范围变小 - 测试时用 Safari 开发者工具检查 “Computed” 面板里的
stacking context是否被意外创建
真正难调的从来不是数字大小，而是上下文是否连通。只要有一层容器漏掉 position: relative，整条层级链就断了。
