使用 absolute 与 relative 实现分栏布局：父容器设为 relative，子元素用 absolute 脱离文档流定位；左栏固定宽度，右栏通过 left 和 right 值自适应；三栏布局中两侧固定，中间设置左右偏移实现自适应；该方法灵活但存在内容重叠、响应式差等问题，建议特定场景使用，现代布局优先选择 Flexbox 或 Grid。
要实现分栏布局，使用 absolute 与 relative 定位结合是一种经典方法。虽然现代布局更推荐使用 Flexbox 或 Grid，但在某些特定场景下，掌握定位实现方式依然很有价值。
理解 relative 与 absolute 的定位机制
relative 定位的元素相对于自身原始位置进行偏移，但它仍占据文档流中的空间。而 absolute 定位的元素会脱离文档流，相对于最近的已定位（relative、absolute 或 fixed）祖先元素进行定位。
在分栏布局中，通常将父容器设为 relative，子元素使用 absolute 来精确定位左右栏和内容区。
实现两栏布局：左侧固定，右侧自适应
假设左侧导航栏宽度为 200px，右侧主内容区域自动填充剩余空间。
立即学习“前端免费学习笔记（深入）”；
HTML 结构示例：
<div class="container"><div class="sidebar">左侧菜单</div>
<div class="main-content">主内容</div>
</div>
CSS 样式如下：
position: relative;
height: 100vh;
}
.sidebar {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background-color: #f4f4f4;
}
.main-content {
position: absolute;
left: 200px;
right: 0;
top: 0;
height: 100%;
background-color: #fff;
padding: 15px;
}
这里的关键是：
- 父容器设置 position: relative，为子元素提供定位上下文。
- 左侧栏用 absolute 固定宽度并贴左。
- 主内容使用 left: 200px 避开左侧栏，right: 0 实现自适应宽度。
实现三栏布局：两侧固定，中间自适应
常见于传统网页结构，左右边栏固定宽度，中间内容区自动伸缩。
CSS 示例：
.sidebar-left {position: absolute;
left: 0;
top: 0;
width: 150px;
height: 100%;
background: #eee;
}
.sidebar-right {
position: absolute;
right: 0;
top: 0;
width: 150px;
height: 100%;
background: #eee;
}
.main-content {
position: absolute;
left: 150px;
right: 150px;
top: 0;
height: 100%;
padding: 10px;
}
通过同时设置 left 和 right 值，中间区域能自动计算可用空间，无需 JavaScript 计算宽度。
注意事项与局限性
这种布局方式虽灵活，但也存在一些问题：
- absolute 脱离文档流，可能导致内容重叠或父容器塌陷。
- 不利于响应式设计，屏幕缩小时需额外媒体查询调整。
- 可访问性和 SEO 不如标准流布局友好。
建议仅在需要精确控制位置或兼容旧浏览器时使用。现代项目优先考虑 Flexbox 或 CSS Grid。
基本上就这些。掌握 absolute 与 relative 的配合，有助于深入理解 CSS 定位机制，也能在特殊需求下快速实现布局目标。
