position 有哪些值？定位的原点分别是什么？

值原点
static默认值，无定位，按正常流布局
relative元素自身原本所在的位置（不脱离文档流）
absolute最近的 position 不为 static 的祖先元素；没有则回退到初始包含块（与视口相关）
fixed视口（viewport）
sticky最近的滚动祖先元素，超过阈值前表现为 relative，之后表现为 fixed

补充说明：

  • 绝对定位：基于最近的 position: relative/absolute/fixed 祖先元素进行定位。如果没有找到，则基于初始包含块（initial containing block，等同于 viewport 大小的矩形）进行定位，并不是基于根元素定位。
  • 固定定位：基于 viewport（浏览器视窗）进行定位。
  • 相对定位：定位原点是元素自己所在位置。
  • 百分比计算：绝对定位和固定定位的元素，若其宽度 width 或高度 height 的单位为百分比，宽度和高度值是相对于其基于定位的元素计算的（在使用一些 sticky 插件时尤其要注意这点）。

补充：sticky 是相对定位和固定定位的"混合体"，常用于吸顶效果（如导航栏、表格表头）。注意：

  • 必须给滚动容器（通常是 body 或某个 overflow: auto 容器）显式高度才能看到粘性效果；
  • 元素的 top/bottom 值决定了"粘住"的时机；
  • 祖先元素不能有 overflow: hidden（否则会失效）。