绝对定位实现双栏布局需父容器设 position: relative 和明确高度；左右栏用 left/right 定位，中间区须手动留白；后续内容易被覆盖，因脱离文档流；现代项目推荐 flex 布局替代。

绝对定位实现双栏布局的前提条件

必须给父容器设置 position: relative，否则 position: absolute 的子元素会相对于最近的已定位祖先（可能是 body）定位，导致位置失控。同时，父容器需有明确高度（如 height: 100vh 或固定像素值），否则绝对定位的子元素可能“看不见”——因为它们脱离文档流后，父容器高度会塌为 0。

左右栏分别用 left 和 right 定位的写法

这是最直接的双栏定位方式，适合固定宽度侧栏 + 自适应主内容区的场景：

• 左栏设 left: 0; width: 240px;，右栏设 right: 0; width: 320px;
• 中间内容区不能靠“自动占位”，必须手动留白：margin: 0 320px 0 240px;
• 若左右栏高度不一致，中间区不会自动等高——它只按自身内容撑高，视觉上可能断裂
• 响应式时需配合媒体查询重置 left/right 值和 margin，否则小屏下会重叠或溢出

常见错误：后续内容被顶到顶部或消失

这是绝对定位双栏最典型的副作用。因为 position: absolute 元素完全脱离文档流，浏览器渲染后续元素时“不知道”前面有两个大块占着空间。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 现象：在双栏下方加一个

  new part

  ，结果它直接出现在视口顶部，被双栏覆盖
• 原因：父容器没设高度，或没给后续元素加 margin-top 手动腾出空间
• 临时解法：给 new part 加 margin-top: 100vh;（假设双栏是全高），但不可靠——滚动、缩放、动态内容都会破坏它
• 真正可靠的方案不是补 margin，而是换布局模型（比如 display: flex）

为什么现在不推荐用绝对定位做常规双栏

它解决的是“精确定位”，不是“结构化布局”。实际项目中容易踩的坑远多于便利性：

• 无法与 min-height / flex-grow 等现代布局特性共存
• 打印样式表（@media print）中几乎必然错乱，因脱离流的元素常被忽略或错位
• 无障碍阅读器可能跳过绝对定位区域，或读取顺序混乱（DOM 顺序 ≠ 视觉顺序）
• 动画、过渡、transform 等叠加使用时，z-index 层级极易失控

如果你真需要右栏“贴右且全高”，又不想后续内容塌陷，优先考虑 display: flex 配合 align-items: stretch —— 它既保持文档流，又能自然等高，还不用算 margin。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！