东月的文档站

Appearance

Return to top
On this page

CSS 定位（简洁版）

属性值速查表

| 值 | 偏移基准 | 脱离文档流 | 典型场景 | | static | 无（默认） | ❌ | 常规布局 | | relative | 自身原位置 | ❌（占位保留） | 微调、作为绝对定位的父容器 | | absolute | 最近的非static祖先 | ✅ | 浮窗、图标角标 | | fixed | 浏览器视口 | ✅ | 固定导航栏、返回顶部 | | sticky | 滚动容器（混合模式） | ❌（占位保留） | 表头吸顶、侧边栏 |

常用代码片段

css
/* 相对定位微调 */
.relative { position: relative; top: 5px; }
/* 绝对定位（父级需 relative）*/
.parent { position: relative; }
.child { position: absolute; top: 0; right: 0; }
/* 固定导航栏 */
.nav { position: fixed; top: 0; width: 100%; }
/* 粘性表头 */
th { position: sticky; top: 0; }
/* 居中弹窗 */
.modal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

关键点

  • 偏移属性：top / right / bottom / left（仅对非static生效）
  • 层级：z-index 控制堆叠顺序（仅非static元素有效）
  • absolute无锚点 → 相对 <html>（随页面滚动，不同于fixed）
  • sticky需指定阈值（如 top:0）才生效，且不兼容IE