绝对定位是CSS中position属性的可选值之一，通过设置position:absolute可以开启元素的绝对定位模式，该模式下元素会脱离普通文档流，不再占据原来的空间位置，其定位基准是最近的已定位祖先元素，如果没有已定位祖先元素，则会以初始包含块为基准进行定位。
绝对定位的核心特点
脱离文档流
开启绝对定位的元素会完全脱离普通文档流，不会影响到其他普通流元素的位置排布。比如一个div开启绝对定位后，它后面的元素会忽略它的存在，直接填补它原来占据的空间。
我们可以通过下面的代码直观看到这个效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 300px;
height: 300px;
border: 1px solid #000;
}
.absolute-box {
position: absolute;
width: 100px;
height: 100px;
background-color: #f00;
}
.normal-box {
width: 150px;
height: 150px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute-box"></div>
<div class="normal-box"></div>
</div>
</body>
</html>
定位基准明确
绝对定位元素的定位偏移是相对于最近的position值不为static的祖先元素计算的，如果不存在这样的祖先元素，就会相对于初始包含块也就是整个html文档的可视区域计算偏移。我们可以通过top、right、bottom、left四个属性来设置元素的位置偏移量。
下面的代码展示了不同定位基准下的效果：
/* 父元素开启相对定位，子元素绝对定位以父元素为基准 */
.parent {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #333;
}
.child {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: #00f;
}
/* 没有已定位祖先元素，子元素以初始包含块为基准 */
.no-position-parent .child {
position: absolute;
top: 100px;
left: 100px;
}
不影响其他元素布局
由于绝对定位元素脱离文档流，它的尺寸变化、位置移动都不会影响到其他普通流元素的排布，这和其他定位方式有明显区别。比如普通流中的元素宽度变化可能会挤开相邻元素，但绝对定位元素不会。
绝对定位的优越性
实现精准的局部定位
绝对定位可以非常精准地控制元素在容器内的位置，适合实现一些需要精确摆放的组件，比如弹窗的关闭按钮、卡片上的角标、悬浮的操作按钮等。这些组件不需要跟随文档流排布，只需要固定在容器的某个角落即可。
实现角标效果的代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.card {
position: relative;
width: 200px;
height: 300px;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.badge {
position: absolute;
top: 10px;
right: 10px;
padding: 2px 8px;
background-color: #ff4d4f;
color: #fff;
font-size: 12px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="card">
<div class="badge">热销</div>
<p>商品卡片内容</p>
</div>
</body>
</html>
简化复杂布局的实现
在一些复杂的布局场景中，比如需要元素叠加、悬浮在页面特定位置、实现全屏遮罩等效果，使用绝对定位会比普通文档流加浮动的方式简单很多。比如全屏遮罩只需要给遮罩元素设置position:absolute，同时设置top、right、bottom、left都为0，就可以覆盖整个可视区域。
全屏遮罩的实现代码：
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
配合层叠上下文实现层级控制
绝对定位元素可以通过z-index属性控制自己的层叠顺序，配合其他创建层叠上下文的属性，可以实现复杂的元素层级效果，比如弹窗在最上层、遮罩在弹窗下层、普通内容在最底层的效果，这在交互类组件开发中非常实用。
使用绝对定位的注意事项
虽然绝对定位有很多优势，但也不能滥用。如果大量使用绝对定位，会导致页面布局失去弹性，当内容尺寸变化时可能出现布局错乱的问题。一般建议只在需要脱离文档流、精准定位的场景下使用绝对定位，普通的内容布局还是优先使用普通文档流、弹性布局或者网格布局。
另外，绝对定位元素如果没有设置宽度，其宽度会由内容撑开，如果需要元素宽度和父容器一致，需要显式设置宽度为100%或者设置left和right都为0。
绝对定位CSS布局position属性层叠上下文修改时间：2026-06-30 05:30:35