在CSS中，position属性用来控制元素在页面里的摆放方式。当我们将某个元素的position设置为absolute时，它就进入了绝对定位状态。这里的“绝对”并不是指固定在屏幕上的某个死坐标，而是指这个元素脱离了正常的文档流，它的位置是相对于一个明确的参照容器来决定的，而不是像普通块级元素那样挨个往下排。
绝对定位的参照规则
绝对定位元素会向上查找祖先节点，找到第一个position值不是static的元素，就以这个祖先的边框内区域作为参照进行偏移。如果一直找不到，就相对初始包含块，也就是整个浏览器视口来定位。
常见参照情况
- 父元素设置position: relative，子元素absolute，子元素相对父元素定位
- 所有祖先都是static，绝对定位元素相对视口定位
- 绝对定位元素不占原文档空间，后续元素会补上来
代码示例
下面演示一个父级相对定位、子级绝对定位的卡片布局：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.box {
position: relative; /* 父级相对定位 */
width: 300px;
height: 200px;
background: #f0f0f0;
}
.tag {
position: absolute; /* 子级绝对定位 */
top: 10px;
right: 10px;
background: red;
color: #fff;
padding: 4px 8px;
}
</style>
</head>
<body>
<div class="box">
<span class="tag">标签</span>
内容区域
</div>
</body>
</html>
使用注意点
因为绝对定位元素脱离文档流，如果祖先容器没有设定高度，可能会出现父容器塌陷。另外在响应式设计中，用top、left等写死偏移时要测试不同屏幕下的表现。理解“绝对”是相对最近定位祖先而言，就能更灵活地实现悬浮按钮、提示框等效果。
简单对照表
| position值 | 是否脱离文档流 | 参照对象 |
|---|---|---|
| static | 否 | 无 |
| relative | 否 | 自身原位置 |
| absolute | 是 | 最近非static祖先或视口 |
记住：绝对定位的“绝对”是相对明确的定位上下文绝对，不是相对屏幕永远不动。