标准答案

  1. static 是默认定位,元素按普通文档流排列,top、right、bottom、left 不生效。
  2. relative 不脱离文档流,会保留原位置,但可以相对自身原位置偏移,也常用来给内部 absolute 元素建立定位参考。
  3. absolute 会脱离文档流,位置相对最近的非 static 定位祖先计算;没有定位祖先时,通常相对初始包含块。
  4. fixed 也脱离文档流,通常相对视口定位,适合固定导航、悬浮按钮这类场景。
  5. 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 看起来失效。

作者信息