position五种取值核心区别在是否脱离文档流及参照物：static不脱离、无参照；relative不脱离、参照自身原位；absolute/fixed均脱离，前者参照最近已定位祖先或html，后者恒参照视口；sticky为relative与fixed自动切换，需设阈值。
position 有 5 种常用取值：static、relative、absolute、fixed、sticky —— 区别核心在「是否脱离文档流」和「参照物是谁」。
static 是默认值，不参与定位计算
元素完全按 HTML 顺序自然排列，top、left、z-index 等属性全部无效。它没有“参照物”概念，因为压根没开启定位机制。
- 不用显式写
position: static，写了也等于没写 - 想用
top/left等偏移？必须先改掉static - 它是所有其他定位方式的“起点”——只有非
static的祖先，才能成为absolute的参照物
relative 参照自身原始位置，不脱离文档流
元素还在文档流里占着原来的空间，只是视觉上“挪了一小步”。它的 top/left 是相对于自己原本该在的位置计算的。
- 常见用途：微调按钮/图标位置，或给子元素提供
absolute的定位上下文（比如给父容器加position: relative） - 注意：
relative元素不会影响其他元素布局，但它的z-index有效，可用于图层控制 - 错误做法：只设
relative却不写top/left—— 效果和static完全一样
absolute 和 fixed 都脱离文档流，但参照物完全不同
absolute 找最近的「已定位祖先」（即 position 不是 static 的父级），找不到就 fallback 到 <html>；而 fixed 永远只认视口（viewport），滚动时纹丝不动。
立即学习“前端免费学习笔记（深入）”；
-
absolute常用于弹窗、下拉菜单、图标角标等需要“贴着某块区域定位”的场景 -
fixed适合返回顶部按钮、悬浮客服、导航栏吸顶（但注意：它不随页面缩放重排，移动端需额外处理） - 兼容性提醒：
fixed在 iOS Safari 旧版本中可能触发渲染 bug，建议加transform: translateZ(0)强制硬件加速
sticky 是 relative 和 fixed 的自动切换体
它本质是“带触发条件的 relative”：滚动前表现如 relative，一旦滚动到指定阈值（比如 top: 0），立刻变成 fixed 并卡在那个位置。
- 必须设置至少一个阈值（
top、bottom、left或right），否则行为退化为relative - Safari 需要加
-webkit-sticky前缀，IE 和 Edge 15 及更早版本完全不支持 - 典型用法：
position: -webkit-sticky; position: sticky; top: 0;实现表格表头或导航栏吸顶
真正容易被忽略的是：所有非 static 定位都依赖「已定位祖先」这个隐性链路。一个 absolute 元素突然飞到左上角，大概率是因为它所有父级都是 static，最终锚定到了 <html> —— 而不是你预期的某个包裹容器。
