CSS: CSS 定位
最后更新：2026-10-13
定位（position）让你能够精确控制元素在页面中的位置。CSS 提供了五种定位方式，每种都有自己的规则和用途。
定位属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
position |
static, relative, absolute, fixed, sticky |
定位方式 |
top |
20px, 50%, auto |
距上边缘的距离 |
right |
20px, 50%, auto |
距右边缘的距离 |
bottom |
20px, 50%, auto |
距下边缘的距离 |
left |
20px, 50%, auto |
距左边缘的距离 |
z-index |
10, 999, -1 |
层叠顺序（数值越大越靠上） |
1. position 的值
| 值 | 描述 | 参考点 |
|---|---|---|
static |
默认值，正常文档流 | 无 |
relative |
相对定位 | 元素自身原来的位置 |
💡 relative 的妙用：
position: relative 最大的价值不是"微调元素位置"，而是作为 absolute 子元素的定位参照点。想让一个元素绝对定位到某个容器内，给那个容器加 position: relative。
⚠️ 脱离文档流： 绝对定位的元素会脱离文档流，不占空间。这意味着后面的元素会"挤上来"。如果父容器没有设置定位，
absolute 会相对于 <html> 定位——很可能不是你想要的。
| absolute | 绝对定位 | 最近的定位祖先 |
| fixed | 固定定位 | 浏览器视口 |
✅ 常见场景：
fixed 定位最适合做"回到顶部"按钮、固定导航栏、悬浮广告。注意在手机上 fixed 在某些浏览器中表现不一致，需要做兼容测试。
| sticky | 粘性定位 | 滚动容器 + 视口 |
📌 sticky 生效条件：
sticky 定位的元素必须至少指定 top、bottom、left、right 中的一个值才会生效。它像是 relative 和 fixed 的结合——在滚动到阈值前是相对定位，超过后变成固定定位。
2. static（静态定位）
这是元素的默认定位方式。元素按照正常文档流排列，top、right、bottom、left、z-index 等属性无效。
▶ 示例
▶ 试一试3. relative（相对定位）
元素相对于自身原来的位置进行偏移。元素原本占据的空间仍然保留，不会影响其他元素的布局。
▶ 示例
▶ 试一试(1) relative 的主要用途
- 微调元素位置：在当前位置基础上做小幅调整
- 作为 absolute 的参考父元素：给子元素的绝对定位提供定位基准
▶ 示例
▶ 试一试4. absolute（绝对定位）
元素脱离正常文档流（不占据空间），相对于最近的定位祖先元素进行定位。如果祖先元素都没有设置定位，则相对于初始包含块（通常是浏览器视口）。
▶ 示例
▶ 试一试(1) absolute 的经典用法
1. 徽标/角标
▶ 示例
▶ 试一试2. 遮罩层
▶ 示例
▶ 试一试3. 居中定位
▶ 示例
▶ 试一试5. fixed（固定定位）
元素相对于浏览器视口进行定位，不随页面滚动。
▶ 示例
▶ 试一试(1) fixed 的常见场景
- 固定导航栏（固定在页面顶部）
- 回到顶部按钮（固定在右下角）
- 悬浮广告或提示
- 模态框背景
6. sticky（粘性定位）
元素在正常文档流中滚动，当滚动到达设定的阈值时"粘"在视口中。它是 relative + fixed 的混合体。
▶ 示例
▶ 试一试(1) sticky 的使用要点
- 需要设置
top、bottom、left、right中的一个值才生效 - 父元素不能设置
overflow: hidden或overflow: auto - 父元素的高度必须大于 sticky 元素的高度（否则无法实现粘性效果）
7. z-index（层叠顺序）
当元素重叠时，z-index 控制谁在上层：
▶ 示例
▶ 试一试注意：z-index 只在定位元素（非 static）上生效。
(1) 层叠上下文
z-index 是在同一个"层叠上下文"中比较的。每个定位元素都会创建一个层叠上下文，子元素的 z-index 只在父元素的上下文中有效。
8. 定位属性总结
| 定位方式 | 脱离文档流 | 参考对象 | 滚动 |
|---|---|---|---|
| static | 否 | - | 跟随滚动 |
| relative | 否（保留空间） | 自身原位置 | 跟随滚动 |
| absolute | 是 | 最近的定位祖先 | 跟随祖先滚动 |
| fixed | 是 | 视口 | 不跟随滚动 |
| sticky | 混合 | 滚动容器+视口 | 先跟随，后固定 |
❓ 常见问题
Q position: relative 有什么用？
A 最常用的作用是作为 absolute 子元素的定位参照点。给父容器加
position: relative（不偏移），子元素 position: absolute 就会相对于父容器定位。没有 relative 的父容器，absolute 会相对于整个页面定位。Q fixed 定位在手机上不好用怎么办？
A fixed 在移动端 Safari 等浏览器中表现不一致，特别是在键盘弹出或页面滚动时。可以用
position: sticky 替代部分场景，或者用 JavaScript 检测移动端做特殊处理。Q z-index 设了很大还是被挡住？
A z-index 只在同一个层叠上下文中有效。如果父元素设置了 z-index，子元素的 z-index 只在父元素的上下文中比较，不会跨父元素。检查是否有父元素的 z-index 较低、或者父元素设置了 opacity 等属性创建了新的层叠上下文。
📖 小节
- CSS 定位是布局中非常强大的工具
relative适合微调和作为定位基准absolute适合精确定位子元素到父元素的某个位置fixed适合固定在视口中的元素（如导航栏）sticky则适合"到达某个位置后固定"的场景- 用好定位，再配合
z-index控制层叠，几乎可以处理任何布局需求
📝 作业
- 创建一个"商品卡片"，图片右上角有一个"热销"角标（使用
position: absolute实现）。 - 制作一个固定在页面底部的"底部导航栏"或"版权声明"（使用
position: fixed）。 - 制作一个"粘性标题"——列表中的分类标题在滚动到顶部时固定，直到下一个标题推走它（使用
position: sticky）。 - 在一个容器中实现子元素的绝对居中（同时使用 absolute、top/left 和 transform）。
