用 position: absolute 实现三栏布局的核心是避免中间栏被压住、防小屏重叠、保持 dom 顺序合理：中间栏需用 margin 腾出左右栏空间，设 top 防导航重叠，加 min-width 或媒体查询适配小屏，dom 顺序应按语义而非视觉排列。
直接说结论：用 position: absolute 实现三栏布局，核心不是“怎么定位”，而是“怎么避免中间栏被压住、怎么防小屏重叠、怎么保持 DOM 顺序合理”。
absolute 定位三栏时，中间栏必须用 margin 腾空间
左右栏脱离文档流后，中间栏默认会从顶部开始渲染，直接盖在它们上面。唯一可靠的做法是给中间栏加左右 margin，值等于左右栏的宽度（单位需一致）。
- 左栏宽
200px、右栏宽220px→ 中间栏写margin: 0 220px 0 200px - 如果左右用百分比（如
left: 10%,right: 10%），中间栏就得用margin: 0 10% 0 10% - 千万别漏掉
top值 —— 否则中间栏可能和导航栏重叠；常见做法是设top: 30px（对应导航高度）
小屏下 absolute 容易导致内容被裁或重叠
当浏览器宽度小于左右栏宽度之和（比如 200px + 220px = 420px），中间栏的 margin 会让它实际可用宽度变成负数，内容被挤出视口或与侧栏重叠。
- 最简防御：给 body 加
min-width，例如min-width: 700px - 更稳妥的做法：配合媒体查询，在小屏时切换为单列，例如
@media (max-width: 768px) { .left, .right { display: none; } .middle { margin: 0; } - 注意：绝对定位本身不响应，
width: 100%对中间栏只作用于父容器，不是整个 viewport
DOM 顺序影响可访问性与 SEO，但 absolute 不强制要求顺序
浮动或双飞翼布局常要求中间栏放在最后，而 absolute 没这个限制 —— 左/中/右谁先写都行，只要 CSS 定位逻辑自洽。
- 推荐 HTML 顺序仍按语义：导航 → 中间内容 → 左栏 → 右栏（或把侧栏放底部再用 JS 移动）
- 如果把左栏写在中间栏后面，又没设
z-index，它可能遮住中间内容 —— 记得给中间栏加z-index: 2，左右栏用z-index: 1 - 屏幕阅读器读取顺序依赖 HTML 流，不是视觉位置，所以别为了“看起来顺”乱调 DOM 顺序
真正麻烦的从来不是写几行 position: absolute，而是处理它带来的脱离流副作用：重叠、截断、焦点跳转异常、打印样式错乱 —— 这些问题在开发阶段容易被忽略，上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
