position: static 是默认值，元素按文档流排布且 top/right/bottom/left/z-index 无效；relative 相对自身定位但不脱离文档流；absolute 脱离文档流并相对于最近已定位祖先定位；fixed 相对于视口固定；sticky 在阈值内 relative、超出后 fixed。
position: static 是默认值，不参与定位流
几乎所有 HTML 元素默认就是 position: static，它意味着元素完全按文档流排布，top、right、bottom、left 和 z-index 都无效。很多人改了这些属性没反应，就是忘了先切到非 static 值。
常见错误现象：div { top: 20px; } 完全不起作用 —— 因为没设 position，或者设成了 static。
- 想用偏移量，必须先设
position: relative/absolute/fixed/sticky -
static元素不会成为其他元素的定位上下文（即不会影响子元素position: absolute的参照） - 不要为了“清浮动”或“重置样式”而无故设
position: static，它不是 reset 工具
position: relative 改变自身位置但不脱离文档流
这是最安全的入门定位方式：元素仍在文档流中占位，但可通过 top、left 等属性相对自己原本位置偏移。
使用场景：微调按钮位置、给图标加 badge、配合 z-index 控制层叠顺序（比如下拉菜单遮盖其他内容）。
立即学习“前端免费学习笔记（深入）”；
button {
position: relative;
}
button::after {
content: "new";
position: absolute;
top: -8px;
right: -8px;
background: #f00;
color: #fff;
font-size: 10px;
padding: 2px 5px;
}
- 子元素设
position: absolute时，会以这个relative父元素为定位参考（而不是整个页面） - 偏移后原占位空间仍在，不影响兄弟元素布局
- 慎用大数值
top/left，容易导致内容被裁剪或交互区域错位
position: absolute 脱离文档流，依赖最近的定位祖先
absolute 元素完全脱离文档流，不占空间，定位起点是「最近的已定位祖先」（即 position 值为 relative / absolute / fixed / sticky 的父级）。找不到就回退到初始包含块（通常是视口）。
常见错误现象：弹窗或 tooltip 没对准目标元素 —— 很可能因为中间某层父容器漏写了 position: relative。
- 父容器没设定位，
absolute子元素就会相对于<html>定位，极易失控 -
top: 0; left: 0并不等于“贴左上角”，而是贴“定位上下文”的左上角 - 配合
transform: translate(-50%, -50%)可实现精确居中，但注意这会触发新层叠上下文
position: fixed 和 sticky 的滚动行为差异
fixed 相对于视口固定，滚动时不动；sticky 是 conditional fixed —— 在滚动到某个阈值前是 relative，过了才变成 fixed。
关键区别在于：
fixed 不受父容器约束，始终绑定视口；
sticky 必须有明确的“容器边界”，且只在该容器内生效（超出容器范围会退回到 relative 行为）。
-
sticky必须配合top或bottom才有效，单独设position: sticky等同于static -
fixed元素的z-index通常需设得更高，否则可能被某些transform或opacity触发的新层叠上下文盖住 -
sticky在 iOS Safari 旧版本和部分安卓 WebView 中支持不稳定，生产环境建议加降级（如监听 scroll 手动切换 class）
top / left 都会偏移。 
