父元素未设position: relative时，absolute子元素会向上查找最近的position为relative/absolute/fixed/sticky的祖先，找不到则相对于或视口定位；top/left以父元素padding box边缘为起点计算；relative是提供定位上下文且不破坏文档流的最稳妥方式。
父元素没设 position: relative，position: absolute 子元素会定位到哪？
它不会停在视觉上的“父容器”里，而是向上遍历 DOM，找第一个 position 值为 relative、absolute、fixed 或 sticky 的祖先。找不到就落到 或初始包含块（通常是视口）。这就是为什么 top: 0; left: 0 的 badge 突然出现在浏览器左上角——父容器仍是 position: static（默认值），等于没提供定位上下文。
position: relative 是唯一安全的父级定位方式吗？
不是唯一，但最常用也最稳妥。父元素设 position: absolute 或 fixed 也能让子元素以它为参照，但会带来副作用：
-
position: absolute父元素自身脱离文档流，可能导致上级容器高度塌陷、兄弟元素上移 -
position: fixed父元素脱离视口流，滚动时位置固定，完全破坏常规布局语义 -
position: sticky行为依赖滚动状态，作为定位上下文不稳定，尤其在嵌套或复杂 scroll 容器中容易失效
所以，position: relative 是唯一既提供定位上下文、又不改变自身文档流位置的选项。
top/left 的数值从父元素哪条边开始算？
从父元素的 padding box 边缘 开始计算。也就是说：top: 0 是紧贴父元素内边距上沿，不是内容区顶部，也不是 border 外侧。
常见影响：
- 父元素有
padding: 20px，子元素top: 0; left: 0会离父容器四边各空出 20px - 想让子元素“贴住”父容器 border 内侧，别用
top: -20px补偿（破坏可维护性） - 更稳妥的做法：把 padding 挪到子元素上，或改用
box-sizing: border-box配合尺寸调整
父元素加了 position: relative 后高度塌陷，怎么办？
塌陷不是因为 relative，而是因为子元素用了 absolute 后彻底脱离文档流，父元素“看不见”它了。典型表现是背景色或边框包不住子元素。
临时解法（适合固定尺寸场景）：
- 给父元素手动设
height或min-height - 用
padding-bottom模拟占位（例如子元素高 40px，父加padding-bottom: 40px）
更现代的替代思路：放弃 absolute + relative 组合，直接用 display: grid 或 display: flex 实现同样效果——比如右上角 badge 用 justify-content: flex-end; align-items: flex-start，居中用 place-items: center。语义清晰，无需担心脱离文档流带来的连锁问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
