CSS 定位：通知徽章
css · intermediate · 15-20 min · Step 1/5CSS Position 定位
| 值 | 特点 | 脱离文档流？ | 参照物 |
|---|---|---|---|
| static | 默认，按文档流排列 | 否 | — |
| relative | 相对自身偏移 | 否 | 自身原始位置 |
| absolute | 绝对定位 | 是 | 最近的非 static 祖先 |
| fixed | 固定在视口 | 是 | 浏览器视口 |
| sticky | 滚动时粘住 | 否 | 滚动容器 |
经典组合：relative + absolute
.parent {
position: relative; /* 建立定位上下文 */
}
.badge {
position: absolute; /* 相对 parent 定位 */
top: 0;
right: 0;
}
口诀：父 relative 子 absolute，是最常用的定位组合。