下面是一篇结构清晰、示例完整、适合教程/博客发布的文章，系统讲解 CSS 中的 Static、Relative、Absolute、Fixed、Sticky 定位的应用与区别。

CSS 中的 Static、Relative、Absolute、Fixed、Sticky 的应用详解

在 CSS 布局中，position 属性决定了元素在页面中的定位方式。理解并熟练使用不同的定位类型，是写好页面布局的基础。

一、position 属性概览

position: static | relative | absolute | fixed | sticky;

二、Static（默认定位）

特点

• 所有元素的默认值
• 不支持 top / left / right / bottom
• 按正常文档流排列

示例

div {
  position: static;
}

📌 使用场景

• 普通文本、段落、列表
• 不需要特殊布局的元素

三、Relative（相对定位）

特点

• 相对于元素原本的位置偏移
• 不脱离文档流
• 常作为 absolute 的参考父元素

示例

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

📌 使用场景

• 轻微调整元素位置
• 为子元素提供定位基准

四、Absolute（绝对定位）

特点

• 脱离文档流
• 相对于最近的 非 static 父元素
• 若无，则相对于 body

示例

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

📌 使用场景

• 弹窗、提示框
• 角标（右上角红点）
• 覆盖在图片上的文字

五、Fixed（固定定位）

特点

• 脱离文档流
• 相对于 浏览器窗口
• 页面滚动时位置不变

示例

.nav {
  position: fixed;
  top: 0;
  width: 100%;
}

📌 使用场景

• 顶部导航栏
• 返回顶部按钮
• 悬浮客服按钮

⚠️ 注意：

• 移动端需留意遮挡内容
• 常配合 z-index

六、Sticky（粘性定位）

特点

• 相对定位 + 固定定位的结合
• 在指定范围内滚动时固定
• 不脱离文档流

示例

.header {
  position: sticky;
  top: 0;
}

📌 使用场景

• 吸顶导航
• 表格表头固定
• 目录跟随滚动

⚠️ 注意事项：

• 父元素不能设置 overflow: hidden
• 必须指定 top / left 等值

七、五种定位方式对比总结

八、常见组合用法

1️⃣ 父 Relative + 子 Absolute（最经典）

.card {
  position: relative;
}
.badge {
  position: absolute;
  top: 0;
  right: 0;
}

2️⃣ Fixed + z-index

.float-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

3️⃣ Sticky 吸顶导航

.nav {
  position: sticky;
  top: 0;
  background: #fff;
}

九、新手常见错误

❌ 忘记给父元素设置 position: relative
❌ Sticky 父容器设置了 overflow: hidden
❌ Fixed 元素遮挡内容但未预留空间

十、总结一句话记忆法

Static 正常走，Relative 微调位；
Absolute 找爹走，Fixed 跟窗口；
Sticky 滚到点，就粘住。