CSS的position属性用于指定元素在文档中的定位方式，不同的属性值会让元素呈现出完全不同的布局表现，是前端布局开发中的核心属性之一。理解每个属性值的规则，才能在实际开发中正确使用它实现各类布局效果。
position属性的默认值static
static是position属性的默认值，当元素没有显式设置position属性时，默认就是static定位。这种定位方式下，元素会按照正常的文档流进行排列，设置的top、right、bottom、left以及z-index属性都不会生效。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.static-box {
/* 默认为static，显式设置也不影响 */
position: static;
width: 200px;
height: 100px;
background: #f0f0f0;
/* 以下偏移属性不会生效 */
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="static-box">我是static定位的元素</div>
</body>
</html>
相对定位relative
relative定位的元素首先会按照正常文档流排列，然后可以根据top、right、bottom、left属性相对于自身原来的位置进行偏移。偏移后元素原本在文档流中占有的空间不会被其他元素占据，同时z-index属性会生效。
.relative-box {
position: relative;
width: 200px;
height: 100px;
background: #cce5ff;
/* 相对于自身原位置向下偏移20px，向右偏移30px */
top: 20px;
left: 30px;
z-index: 1;
}
绝对定位absolute
absolute定位的元素会脱离正常文档流，不再占据原来的空间。它的定位参考基准是最近的开启了定位（position值不为static）的祖先元素，如果所有祖先元素都没有开启定位，那么会参考初始包含块（通常是html元素或者浏览器视口）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
position: relative;
width: 400px;
height: 300px;
background: #eee;
margin: 50px;
}
.absolute-child {
position: absolute;
width: 150px;
height: 80px;
background: #ffcccc;
/* 相对于parent元素向右偏移20px，向下偏移30px */
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<div class="parent">
父容器（开启relative定位）
<div class="absolute-child">我是absolute定位的子元素</div>
</div>
</body>
</html>
固定定位fixed
fixed定位的元素同样会脱离正常文档流，它的定位参考基准是浏览器视口，也就是说元素的位置不会随着页面滚动而改变，始终固定在视口的某个位置。常见的使用场景是页面顶部的导航栏、侧边的回到顶部按钮等。
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #333;
color: white;
line-height: 60px;
text-align: center;
z-index: 999;
}
粘性定位sticky
sticky定位是相对定位和固定定位的混合体，元素在跨越特定阈值前表现为相对定位，之后表现为固定定位。它的定位参考基准是最近的滚动祖先，通常需要配合top、right、bottom、left中的一个属性使用，指定粘性定位的触发阈值。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
height: 2000px;
padding-top: 100px;
}
.sticky-header {
position: sticky;
top: 0;
height: 50px;
background: #4CAF50;
color: white;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="sticky-header">我是粘性定位的头部，滚动到顶部会固定</div>
<p style="margin-top: 1200px;">页面底部内容</p>
</div>
</body>
</html>
不同属性值的核心差异对比
为了更清晰地区分不同position属性值的特点，以下是核心特性的对比表格：
| 属性值 | 是否脱离文档流 | 定位参考基准 | 偏移属性是否生效 |
|---|---|---|---|
| static | 否 | 正常文档流 | 否 |
| relative | 否（原空间保留） | 自身原位置 | 是 |
| absolute | 是 | 最近开启定位的祖先元素/初始包含块 | 是 |
| fixed | 是 | 浏览器视口 | 是 |
| sticky | 阈值前否，阈值后类似fixed | 最近滚动祖先 | 是（需设置阈值） |
在实际开发中，需要根据具体的布局需求选择合适的position属性值，比如需要元素相对于父容器定位就给父容器设置relative，子元素设置absolute；需要元素固定在视口某个位置就使用fixed；需要实现滚动到特定位置固定的效果就使用sticky。正确理解每个属性值的规则，能大幅减少布局调试的时间。
CSSposition属性absoluterelativefixed修改时间：2026-07-01 07:24:39