子元素的 absolute 定位相对于最近的已定位祖先元素（position 为 relative/absolute/fixed/sticky），若无则回退至 body 或初始包含块；top/left 从该祖先的 padding box 边缘计算。
父元素没设 position: relative，子元素 position: absolute 会找谁？
子元素的 absolute 不是“相对于父元素”，而是相对于**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）。如果父元素没设 position: relative，浏览器就会继续往上找；找不到就落到 body 或初始包含块（通常视口）。
常见错误现象：top: 0; left: 0 的子元素突然飞到页面左上角，不是卡在父容器里——八成是父元素漏了 position: relative。
- 只要父容器需要成为定位参考，就必须显式加
position: relative（哪怕不设top/left等偏移） -
position: static（默认值）不算“已定位”，加了也白加 - 父元素若本身是
absolute或fixed，也能当参考，但语义和布局行为完全不同，慎用
top/left 的数值到底从哪算起？
从已定位祖先元素的 padding box 边缘 开始计算。也就是说，top: 0 是紧贴祖先元素内边距上沿，不是内容区，也不是 border 外沿。
使用场景：做下拉菜单、气泡提示、右上角 badge 时，这个细节直接影响对齐精度。
立即学习“前端免费学习笔记（深入）”；
- 如果父元素有
padding: 20px，top: 0; left: 0的子元素会离父容器上边和左边各空出 20px - 想让它贴着父容器的 border 内侧？用
top: -20px补偿（不推荐），更稳妥是把 padding 移到子元素或用box-sizing: border-box配合调整 - 注意：
transform: translate()是另一套坐标系，不影响定位参考点，别混用
父元素 relative 后高度塌陷怎么办？
父元素设了 position: relative 本身不会导致塌陷，但一旦子元素变成 absolute，它就脱离文档流——父元素不再把它当高度来源，于是“看不见”它，高度只剩其他非绝对定位子元素撑起来的部分。
典型表现：父容器看起来“变矮了”，背景色/边框只包住文字，盖不住下面的 absolute 子元素。
- 如果父容器需要包裹
absolute子元素视觉区域，得手动给父元素设height或min-height - 不想写死高度？可用
padding-bottom模拟占位（比如子元素固定高 40px，父加padding-bottom: 40px） - 更现代的解法：改用
display: grid或display: flex布局，配合place-items居中，避免依赖absolute定位
移动端 Safari 和老版 Android 浏览器的兼容陷阱
绝大多数现代浏览器对 relative + absolute 组合支持良好，但有两个经典坑：
- iOS Safari 12 及更早版本：父元素若同时设了
transform（如transform: translateZ(0)），可能破坏其作为定位上下文的能力，子元素退回到body定位 - Android 4.4 WebView：父元素
overflow: hidden+relative有时会截断absolute子元素，即使子元素明明在可视范围内 - 验证方法：临时给父元素加个
outline: 1px solid red，看子元素是否还在 outline 框内
