父元素必须设position: relative，因为absolute子元素只认最近的已定位祖先（position为relative/absolute/fixed/sticky），默认static不算；未设则向上查找直至body，导致子元素飘至视口左上角。
父元素必须设 position: relative
绝对定位子元素（position: absolute）不会认“视觉上的父元素”，只找最近的「已定位祖先」——即 position 值为 relative、absolute、fixed 或 sticky 的祖先。默认 position: static 不算数，加了也白加。
常见错误：父元素只写了 width、padding、display: flex，但没加 position: relative → 子元素直接飞到 body 左上角。
- 只需一行 CSS：
.parent { position: relative; }，无需top/left等偏移 - 如果父元素本身已是
absolute或fixed，也能当参照，但语义混乱，不推荐作为常规方案 - 网格项（
grid-item）默认不是定位上下文，同样要显式加position: relative才能让内部absolute子元素以它为基准
父元素高度塌陷不是 relative 的锅，而是 absolute 脱离文档流的必然结果
position: relative 本身不会导致塌陷；塌陷是因为子元素用了 position: absolute 后彻底脱离文档流，父元素在计算高度时“看不见”它。
表现：父容器背景色/边框只包住文字或普通流内元素，absolute 子元素悬在下方，overflow: hidden 也裁不到它。
立即学习“前端免费学习笔记（深入）”；
- 若需视觉上包裹该子元素，得手动干预高度：
min-height比height更安全，留出伸展余地 - 用
padding-bottom模拟占位（例如子元素固定高 40px，父加padding-bottom: 40px）比硬写height: 250px更可控 - 真正要警惕的是：把
absolute当布局主力，又指望父容器自动撑开 —— 这违背设计意图，应优先考虑display: grid或flex+place-items
嵌套多层时，定位上下文只看「最近的已定位祖先」，不是所有父级都参与
哪怕 DOM 结构有 5 层嵌套，只要第 2 层加了 position: relative，第 4 层的 absolute 子元素就以它为原点；中间第 3 层即使也写了 relative，只要没被第 4 层直接继承，就不影响定位基准。
容易踩坑：
- 误以为“爷爷设了
relative，孙子就能相对它定位” → 错，中间父级若没设，孙子会跨过去，但若中间父级也设了，孙子就认它，不认爷爷 - JS 动态插入新节点后，没检查祖先链是否完整（比如父容器被重渲染、
position属性丢失）→ 定位瞬间偏移 - 对父容器用
transform移动时，absolute子元素不会跟着动 —— 因为transform不创建新的定位上下文
别让 top/left 的数值意义被误解
top: 0 是从已定位祖先的 padding box 上边缘 开始算，不是内容区，也不是 border 外沿。
举例：父元素有 padding: 20px，子元素 top: 0; left: 0，实际离父容器可视边界空出 20px。
- 想贴 border 内侧？优先调整父元素
box-sizing: border-box+ 把 padding 挪到子元素，而非用top: -20px补偿（易出错且难维护） - 居中场景别只靠
top: 50%; left: 50%—— 这只是把左上角挪到中心，必须配transform: translate(-50%, -50%)才真居中 -
margin和transform同时用在absolute元素上可能引发渲染抖动，尤其动画中，尽量避免混用
position: relative 是必要条件，但不是万能解；真正麻烦的从来不是怎么加这行 CSS，而是加完之后发现高度塌陷、响应式错位、JS 插入后失效 —— 这些问题背后，往往是对「脱离文档流」和「定位上下文链」的理解偏差。 
