CSS 的 position 属性用于控制元素在页面中的定位方式，不同取值对应不同的定位规则和参考基准。常用的 position 值及定位方式如下：
1. position: static（默认值）
- 定位规则：元素遵循正常的文档流（从上到下、从左到右排列），不受
top、right、bottom、left和z-index属性影响。 - 参考基准：无特殊基准，完全按照默认布局顺序排列。
- 示例：大多数元素默认为此值，如
<p>、<div>等。
2. position: relative（相对定位）
-
定位规则：元素先按照正常文档流排列（占据原有空间），再通过
top/right/bottom/left相对于自身原始位置进行偏移（偏移后不会影响其他元素的布局）。 -
参考基准：元素自身的原始位置（未偏移时的位置）。
-
特点：
- 偏移后，元素原来的空间仍然保留（不会被其他元素占据）。
- 可通过
z-index控制层级（默认在普通元素上方）。
.box {
position: relative;
top: 10px; /* 相对于自身原始位置向下移10px */
left: 20px; /* 相对于自身原始位置向右移20px */
}
3. position: absolute（绝对定位）
-
定位规则：元素脱离正常文档流（不占据空间），通过
top/right/bottom/left相对于最近的已定位祖先元素（position值不为static的祖先）进行偏移。 -
参考基准：
- 若存在
position为relative/absolute/fixed/sticky的祖先元素，则以此祖先为基准。 - 若没有已定位的祖先，则相对于根元素（
<html>） 定位（即相对于浏览器视口，滚动时会跟随页面移动）。
- 若存在
-
特点：
- 脱离文档流后，元素原来的位置会被其他元素占据。
- 必须配合
top/right/bottom/left使用（否则可能位置异常）。 - 可通过
z-index控制层级。
.parent {
position: relative; /* 父元素设为相对定位，作为参考基准 */
width: 300px;
height: 300px;
}
.child {
position: absolute;
top: 20px; /* 相对于父元素顶部向下20px */
right: 20px; /* 相对于父元素右侧向左20px */
}
4. position: fixed（固定定位）
-
定位规则：元素脱离正常文档流，通过
top/right/bottom/left相对于浏览器视口（viewport） 进行定位，滚动页面时位置保持不变（固定在屏幕上）。 -
参考基准：浏览器的可视区域（视口），与祖先元素无关。
-
特点：
- 常用于固定导航栏、悬浮按钮、弹窗等组件。
- 脱离文档流，不占据原有空间。
- 可通过
z-index控制层级。
.header {
position: fixed;
top: 0;
left: 0;
right: 0; /* 左右设为0，宽度占满视口 */
height: 60px;
background: white;
}
5. position: sticky（粘性定位）
-
定位规则：结合了
relative和fixed的特性，元素在滚动到特定位置前按正常文档流排列（relative行为），滚动超过阈值后固定在目标位置（fixed行为）。 -
参考基准：
- 未达到阈值时，相对于自身原始位置（同
relative）。 - 达到阈值后，相对于父元素的可滚动区域或视口固定。
- 未达到阈值时，相对于自身原始位置（同
-
关键条件：必须设置
top/right/bottom/left中的至少一个，作为触发固定定位的阈值。 -
示例：常用于列表标题、表格头部（滚动时固定在顶部）：
.section-title {
position: sticky;
top: 0; /* 当元素顶部距离视口顶部为0时，触发固定 */
background: white;
z-index: 10;
}
总结：各值的核心区别
position 值 | 是否脱离文档流 | 定位参考基准 | 典型应用场景 |
|---|---|---|---|
static | 否 | 正常文档流 | 默认布局 |
relative | 否（保留空间） | 自身原始位置 | 微调元素位置、作为 absolute 的父容器 |
absolute | 是 | 最近的已定位祖先（无则为根元素） | 弹窗、下拉菜单、精确布局 |
fixed | 是 | 浏览器视口（滚动时固定） | 固定导航栏、悬浮按钮 |
sticky | 部分（滚动到阈值后脱离） | 原始位置 → 视口 / 父容器滚动区域 | 列表标题、表格头部 |
