相对定位以元素原本位置为参照点，不脱离文档流；绝对定位向上查找最近非static祖先作为定位上下文，无则相对于视口，父设relative可提供可靠锚点。
相对定位 position: relative 怎么找参照物
元素自己原本的位置就是参照点，不脱离文档流，top/left 等偏移是相对于它「本来该在的地方」计算的。比如一个段落设置了 position: relative; top: 20px;，它会从原始位置往下挪 20px，但原来那块空间还留着，不影响其他元素布局。
常见误用：以为加了 relative 就能当子元素绝对定位的“父容器”，其实它只是“允许自己被偏移”，并不自动变成 absolute 子元素的定位上下文——除非它同时有 position 值且不是 static（默认值）。
绝对定位 position: absolute 找谁当爹
往上找最近的「已定位祖先元素」（即 position 为 relative、absolute、fixed 或 sticky 的祖先），找不到就落到初始包含块（通常是视口）。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 脱离文档流，不占空间，可能盖住别的内容
- 如果父容器没设
position（保持static），哪怕看起来是“包裹关系”，子元素也会跳到 body 或视口去定位 -
top: 0; left: 0;在不同父容器下表现完全不同：父是relative，就贴父左上角；父是static，就贴整个页面左上角
为什么父容器加了 relative 后子元素才“听话”
因为 absolute 的定位上下文（containing block）由最近的「非 static 定位祖先」决定。relative 是最轻量、最常用的选择——它不改变元素位置（不设偏移时），又满足“非 static”条件，让子元素有了可靠的锚点。
注意：position: sticky 和 fixed 虽然也能当参照，但行为更特殊（如 fixed 相对视口，sticky 有滚动临界点），日常做局部定位控制，首选 relative。
容易被忽略的边界情况
当父容器有 transform、filter 或 will-change 时，即使它是 static，也可能意外创建新的 containing block，导致 absolute 子元素参照它而不是更上层的 relative 父级——这种隐式触发很难排查。
另外，overflow: hidden 不影响定位参照，但会裁剪溢出的 absolute 元素，造成“看不见却占位”的假象；而 z-index 只在定位元素（relative/absolute/fixed/sticky）间生效，static 元素永远在底层。
