CSS的position属性用于指定元素在页面中的定位方式，不同的取值会让元素呈现出完全不同的布局表现，理解各个取值的差异是掌握CSS布局的基础。
position属性各取值核心差异对比
我们可以先通过表格快速了解六个取值的核心区别：
| 取值 | 是否脱离文档流 | 定位参考基准 | 典型场景 |
|---|---|---|---|
| static | 否 | 正常文档流位置 | 默认元素布局 |
| relative | 否 | 元素自身原位置 | 微调元素位置、作为absolute的参考容器 |
| absolute | 是 | 最近的非static定位祖先元素 | 弹窗、下拉菜单、图标角标 |
| fixed | 是 | 浏览器视口 | 固定导航栏、回到顶部按钮 |
| sticky | 滚动时脱离 | 父容器视口 | 滚动吸顶标题、列表分类头 |
| inherit | 继承父元素 | 继承父元素规则 | 需要复用父元素定位规则的场景 |
static：默认的定位方式
static是position属性的默认值，元素会按照正常的文档流进行排列，此时设置top、bottom、left、right这些偏移属性是无效的，元素的位置完全由文档流的规则决定。
/* static是默认值，无需显式声明也可以 */
.static-box {
position: static;
/* 以下偏移属性不会生效 */
top: 20px;
left: 30px;
}
relative：相对自身定位
relative取值会让元素保留在原来的文档流位置，不会脱离文档流，后续的元素还是会按照它原来的位置进行排列。偏移属性top、bottom、left、right会让元素相对于自己原本的位置进行移动，移动后原来的位置会保留空白，不会被其他元素占据。
.relative-box {
position: relative;
/* 相对于自身原位置向右移20px，向下移10px */
top: 10px;
left: 20px;
width: 100px;
height: 100px;
background: #f0f0f0;
}
relative还有一个重要作用，就是作为absolute定位元素的参考容器，只要给父元素设置position: relative，子元素的absolute定位就会以这个父元素为基准。
absolute：绝对定位
absolute会让元素完全脱离文档流，原本占据的文档流位置会被其他元素占据。它的定位参考基准是最近的一个position取值不是static的祖先元素，如果不存在这样的祖先元素，就会以初始包含块（通常是浏览器视口）为基准。
/* 父容器设置relative作为参考 */
.parent {
position: relative;
width: 300px;
height: 300px;
background: #e8e8e8;
}
/* 子元素绝对定位，相对于parent容器定位 */
.child {
position: absolute;
/* 距离父容器顶部10px，右侧10px */
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background: #ff9900;
}
fixed：固定定位
fixed也会让元素脱离文档流，它的定位参考基准是浏览器的视口，也就是说元素的位置不会随着页面滚动而变化，始终固定在视口的某个位置。
.fixed-nav {
position: fixed;
/* 固定在视口顶部 */
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
sticky：粘性定位
sticky是相对定位和固定定位的结合，元素在滚动到某个阈值之前会表现为relative，按照正常文档流排列，当滚动到设定的阈值（比如top: 0）之后，就会表现为fixed，固定在视口的指定位置，直到它的父容器滚出视口。
.sticky-header {
position: sticky;
/* 当元素距离视口顶部0px时，固定吸顶 */
top: 0;
background: #ffffff;
padding: 15px;
border-bottom: 1px solid #e8e8e8;
}
需要注意sticky的父容器不能有overflow: hidden或者overflow: auto的设置，否则粘性效果会失效。
inherit：继承父元素定位
inherit取值会让元素继承父元素的position属性值，如果父元素的position是relative，那么这个元素也会是relative定位，父元素的定位规则会完全传递给该元素。
.parent {
position: absolute;
}
/* 子元素继承父元素的absolute定位 */
.child {
position: inherit;
top: 20px;
left: 20px;
}
使用注意事项
- 使用absolute定位时，尽量给父容器设置非static的position，避免定位基准不符合预期。
- fixed定位在一些移动端浏览器中可能会有兼容性问题，比如软键盘弹出时位置可能偏移。
- sticky定位需要明确指定top、bottom、left、right其中一个阈值才会生效。
- 脱离文档流的元素（absolute、fixed）不会被子元素的margin塌陷影响，也不会影响父元素的高度计算。
CSSposition属性relativeabsolutefixed修改时间：2026-06-22 23:21:53