绝对定位子元素必须相对于最近的已定位祖先（position为relative/absolute/fixed/sticky）定位；若父元素未设position: relative，则向上查找，最终可能相对于body定位。
绝对定位的子元素要相对于父元素定位，前提是父元素必须设为 position: relative —— 这不是可选项，是 CSS 渲染规则强制要求的。
为什么 position: absolute 子元素不认父元素的位置？
因为 absolute 默认找的是「最近的已定位祖先」（即 position 值为 relative、absolute、fixed 或 sticky 的祖先），不是“视觉上最近的父元素”。如果父元素没设 position，浏览器就继续往上找，最终可能落到 body 或初始包含块上。
常见错误现象：top: 20px 结果离页面顶部 20px，而不是离父容器顶部 20px。
- 父元素只写了
width、padding，但没加position: relative→ 失效 - 父元素用了
display: flex或float，但依然没设position→ 仍失效 - 父元素有
position: static（默认值）→ 等同于没设，不算“已定位”
position: relative 父容器要不要设宽高？
要，但不是为了定位生效，而是为了控制布局范围。设了 relative 后，父元素本身仍在文档流中，它的尺寸仍由内容或显式宽高决定；如果它塌陷（比如内部全是 absolute 子元素），那它就“看不见”了，子元素看似飘在空中，其实只是参照了一个高度为 0 的容器。
- 父元素内部只有
absolute子项 → 极大概率高度塌陷，需加height或min-height或留一个正常流元素占位 - 用
padding撑开父容器可以，但不如显式设height或用min-height可控 - 如果父元素是
flex容器，记得align-items和justify-content不影响absolute子元素的定位基准
嵌套多层 absolute 时，谁是参照物？
永远只看「最近的已定位祖先」，和嵌套几层无关。哪怕中间隔着 5 个 div，只要第 3 个设了 position: relative，它下面所有 absolute 子孙都以它为原点。
容易踩的坑：
- 误以为“父元素的父元素设了
relative”，就能让孙子元素相对它定位 → 错，中间那个没设的话，孙子会跨过去找更上面的 - 动态插入子元素后忘记检查祖先链是否还完整 → JS 插入 DOM 后，若父容器被重写或移除
position，定位立刻偏移 - 用
transform移动父容器时，absolute子元素不会跟着动 —— 因为transform不改变定位上下文，只影响渲染层
真正关键的不是“怎么嵌套”，而是每一级“谁负责提供定位上下文”。漏掉任何一个 position: relative，整条链就断了；多加一个没必要的，反而可能干扰其他布局逻辑。定位这件事，容错率低，但规则极简：找最近的已定位祖先，没有就退到初始包含块 —— 就这么回事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
