在css中，当一个元素的position属性被设置为absolute时，它就会脱离文档流。这意味着该元素不再占据原本在普通文档布局中的空间，其原来的位置会被其他处于文档流中的元素填补。这种机制是css定位体系的重要部分，直接影响页面排布与层级表现。
什么是文档流
文档流是指浏览器在渲染页面时，按照html结构中元素的先后顺序与显示类型（块级、行内等），自上而下、自左而右进行排列的默认布局方式。处于文档流中的元素会互相挤占空间，比如一个块级元素默认会另起一行并撑开父容器高度。
absolute如何脱离文档流
设置position: absolute的元素会按照以下步骤脱离文档流：
- 元素从普通布局中移除，不占据原有空间
- 其定位基准变为最近的一个position不为static的祖先元素
- 若没有这样的祖先，则相对于初始包含块（通常是视口）定位
- 元素可通过top、right、bottom、left偏移
基础示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
.box { position: relative; width: 300px; height: 200px; border: 1px solid #ccc; }
.normal { background: #eee; height: 50px; }
.abs { position: absolute; top: 20px; left: 20px; background: orange; width: 100px; height: 100px; }
</style>
</head>
<body>
<div class="box">
<div class="normal">普通元素</div>
<div class="abs">绝对定位</div>
<div class="normal">后面的普通元素</div>
</div>
</body>
</html>在上面代码中，类名为abs的div脱离文档流，因此第二个normal元素会紧挨着第一个normal元素，不会为abs留出空间。
脱离文档流后的影响
对父容器高度的影响
如果绝对定位元素的所有祖先都没有显式高度，且其他子元素均脱离文档流，父容器会出现高度塌陷。通常可让某个祖先设置position: relative来作为包含块，并配合其他流内元素撑开高度。
对兄弟元素的影响
兄弟元素在布局时完全忽略absolute元素，可能产生重叠。此时可通过z-index控制层叠顺序，例如：
.abs {
position: absolute;
z-index: 10;
}常见使用场景
| 场景 | 说明 |
|---|---|
| 角标 | 在商品图右上角放置促销标签，不干扰原布局 |
| 弹窗 | 对话框覆盖页面，脱离流避免推挤内容 |
| 悬浮按钮 | 固定在容器某处，不占文档空间 |
与fixed、relative的区别
fixed也脱离文档流，但相对于视口；relative不脱离文档流，仅视觉偏移。使用absolute时要注意包含块的选择，否则定位会出乎意料。
总结：css absolute元素通过position属性脱离文档流，不再占据空间，以非static祖先为基准定位，是实现精准叠加布局的常用方式。