标准答案
- static 是默认定位,元素按普通文档流排列,top、right、bottom、left 不生效。
- relative 不脱离文档流,会保留原位置,但可以相对自身原位置偏移,也常用来给内部 absolute 元素建立定位参考。
- absolute 会脱离文档流,位置相对最近的非 static 定位祖先计算;没有定位祖先时,通常相对初始包含块。
- fixed 也脱离文档流,通常相对视口定位,适合固定导航、悬浮按钮这类场景。
- sticky 可以理解成 relative 和 fixed 的结合,滚动到阈值前按普通流排列,超过 top 等阈值后在滚动容器内吸附。
题目解析
这题建议按“是否脱离文档流”和“相对谁定位”回答。absolute 和 fixed 都脱离文档流,relative 和 sticky 默认仍占据原位置。
absolute 的参考系不是父元素本身,而是最近的非 static 定位祖先。这个点是最常见追问。
代码示例
给卡片设置 relative 后,角标可以 absolute 到卡片右上角。
CSS
.card {
position: relative;
}
.badge {
position: absolute;
top: 8px;
right: 8px;
}常见误区
- 认为 absolute 一定相对父元素定位。只有父元素是定位元素时才是。
- sticky 不设置 top 就期待生效。
- 忽略父级 overflow 或滚动容器导致 sticky 看起来失效。