定位 position
static/relative/absolute/fixed/sticky 五种定位详解
定位 position
position 是 CSS 布局的核心——五种值决定了元素如何定位。
学完本章你将： 掌握 static/relative/absolute/fixed/sticky 五种定位。
static（默认）
css
.static { position: static; }
/* 正常文档流——top/left/z-index 无效 */relative（相对定位）
css
.relative {
position: relative;
top: 10px; /* 相对于自己原来的位置下移 */
left: 20px; /* 右移 */
}
/* 仍占原来的空间 */absolute（绝对定位）
css
/* 相对于最近的定位祖先（非 static）定位——脱离文档流 */
.parent {
position: relative; /* 作为定位参考 */
}
.child {
position: absolute;
top: 0;
right: 0; /* 右上角 */
}fixed（固定定位）
css
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
z-index: 100;
}
/* 相对于视口固定——滚动不动——常用于导航栏 */sticky（粘性定位）
css
.sticky-nav {
position: sticky;
top: 0; /* 滚动到这里时粘住 */
background: white;
}
/* 相对定位 + 固定定位的混合——到达阈值后固定 */定位总结
| 值 | 参照物 | 脱离文档流 | 常用场景 |
|---|---|---|---|
| static | 无 | ❌ | 默认 |
| relative | 自己 | ❌ | 微调/给 absolute 做参考 |
| absolute | 定位祖先 | ✅ | 弹窗/图标角标 |
| fixed | 视口 | ✅ | 导航栏/回到顶部 |
| sticky | 滚动容器 | ❌ | 吸顶导航 |