CSS定位嵌套规则本质是“最近的已定位祖先元素决定偏移参考系”，absolute元素向上查找第一个non-static祖先作为包含块，未找到则回退至视口；relative父级创建新定位上下文，子absolute以其padding box为基准；fixed只认视口；sticky的吸附区间受最近定位祖先或视口约束。
CSS定位的嵌套规则本质是“最近的已定位祖先元素决定偏移参考系”，不是所有父级都参与定位计算，只有 position 值为 relative、absolute、fixed 或 sticky 的祖先 才会成为子元素 absolute 定位的“包含块”（containing block）。
absolute 元素找谁当“靠山”？
一个 position: absolute 的元素，会逐级向上查找第一个 已定位（non-static）的祖先元素 作为定位参考。找不到就回退到初始包含块（通常是视口）。
- 如果父级是 position: static（默认值），它会被跳过，继续往上找
- 如果父级是 position: relative，哪怕没设 top/left，它也构成包含块
- fixed 元素只认视口，不受任何祖先定位影响（除 transform 等特殊情况）
relative 和 absolute 嵌套时的常见误区
很多人以为给父级加 relative 只是为了“占位”，其实它真正作用是创建新的定位上下文。子元素 absolute 的 top: 20px 是相对于这个 relative 父级的 padding box（含内边距）左上角计算的。
- 父 relative 元素自身仍保留在文档流中，不影响其他元素布局
- 子 absolute 元素脱离文档流，不占据空间，可能覆盖兄弟元素
- 若父 relative 设置了 transform，也会触发新包含块（即使没写 position）
多层嵌套下的定位链路示例
假设结构：<div class="grand"><div class="parent"><div class="child"></div></div></div>
立即学习“前端免费学习笔记（深入）”；
- .grand { position: fixed; } → 不影响 .child，因为中间有更近的已定位祖先
- .parent { position: relative; } → .child 的 absolute 偏移以此为准
- .child { position: absolute; top: 10px; left: 15px; } → 距 .parent 内容区左上角 10px/15px
- 若把 .parent 的 position 改成 static，则 .child 会直接找 .grand（fixed）作为参考
sticky 定位的嵌套特殊性
sticky 是 relative 和 fixed 的混合体，它的“粘性行为”只在其包含块范围内生效。也就是说，它需要一个有高度限制的已定位祖先（比如 max-height + overflow: hidden），否则会一直固定在视口里。
- sticky 元素的偏移（top/right）是相对于其 最近的块级祖先容器（不一定是定位祖先）计算的
- 但它的“吸附区间”受最近的定位祖先（relative/absolute等）或视口边界约束
- 嵌套太深且外层没有明确高度或 overflow 控制时，sticky 往往失效
