子元素会相对于最近的已定位祖先元素（position为relative/absolute/fixed/sticky）定位；若无，则相对于body或初始包含块（视口）。
父元素没设 position: relative，子元素 position: absolute 会定位到哪？
它不会停在父元素里，而是往上找——直到遇到第一个 position 值为 relative、absolute、fixed 或 sticky 的祖先；找不到就落到 <body> 或初始包含块（通常是视口）。这就是为什么 top: 0; left: 0 的子元素突然飞到页面左上角。
常见错误现象：
-
#container没写position: relative，但写了margin和width -
#badge设了position: absolute; right: 0; top: 0，结果贴在浏览器右上角，不是父容器右上角
关键点：position: static（默认值）不算“已定位”，加了也白加；必须显式声明非 static 值。
top/left 的数值到底从父元素哪条边开始算？
从已定位祖先的 padding box 边缘 开始计算。也就是说：top: 0 是紧贴父元素内边距上沿，不是内容区顶部，也不是 border 外侧。
立即学习“前端免费学习笔记（深入）”；
使用场景举例（影响对齐精度）：
- 父元素有
padding: 20px，子元素top: 0; left: 0会离父容器上下左右各空出 20px - 想让子元素视觉上“贴住”父容器 border 内侧？别用
top: -20px补偿（破坏可维护性），更稳妥是把padding移到子元素身上，或改用box-sizing: border-box配合调整 -
transform: translate()是另一套坐标系，不影响定位参考点，混用容易错位
父元素加了 position: relative 后高度塌陷怎么办？
加 position: relative 本身不会导致塌陷，但一旦子元素变成 position: absolute，它就彻底脱离文档流——父元素“看不见”它，也就不再把它当高度来源。
典型表现：父容器背景色/边框只包住文字或普通流子元素，盖不住下面那个 absolute 子元素。
临时解法（适合固定尺寸场景）：
- 给父元素手动设
height或min-height - 用
padding-bottom模拟占位（比如子元素高 40px，父加padding-bottom: 40px）
更现代、更健壮的替代思路：直接放弃 absolute + relative 组合，改用 display: grid 或 display: flex，配合 place-items 或 justify-content/align-items 实现精准控制——尤其当目标只是居中、右上角 badge、底部悬浮这类常见布局时。
为什么不能让父元素也用 position: absolute？
技术上可以，但它会让父元素自身也脱离文档流，进而影响整个布局链：上级容器可能塌陷、兄弟元素位置错乱、响应式行为异常。
语义和行为完全不同：
-
position: relative不改变文档流位置，只提供定位上下文，是“稳定锚点” -
position: absolute父元素 = 自身不可靠 + 向上污染布局，属于反模式 - 除非你明确需要父元素也脱离流（例如全屏弹窗的 wrapper），否则一律避免
真正容易被忽略的点是：定位参考关系是“就近原则”，但稳定性得靠 relative 来兜底；而脱离文档流带来的高度丢失问题，往往要等视觉验收时才暴露——那时再回头补 min-height 或重构布局，成本远高于一开始选对方案。
