HTML双栏布局如何分层？前后遮挡调整说明-html教程-PHP中文网

z-index无效时，先检查父容器是否创建层叠上下文；若未触发新上下文，子元素z-index在根上下文中无效，需为父容器设position:relative等以建立独立上下文。

html双栏布局如何分层？前后遮挡调整说明

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 DHTML 页面生成器

生成可在 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，就会新建上下文，把弹窗锁死在它下面