必须给父元素显式设置position: relative才能使其成为定位上下文，否则absolute子元素会向上查找已定位祖先或锚定视口；top/left从父元素padding box边缘起算，且父元素设relative后因子元素脱离文档流而高度塌陷。
子元素的“相对位置”在 CSS 中本质是伪命题——position: relative 本身不提供参考系，position: absolute 才需要参考系；真正要解决的是：**让绝对定位子元素严格按父容器边界计算偏移，而不是飘到视口或 body 上**。
为什么 top: 0 的子元素没贴住父容器左上角？
这是最常被卡住的点：父容器没设 position: relative，浏览器就往上找第一个已定位祖先（比如 body），而 body 默认有 margin: 8px（用户代理样式）。结果 top: 0; left: 0 实际落在视口左上角向内缩进 8px 的位置。
- 用开发者工具检查父元素的 computed
position值，大概率是static - 检查父元素的
margin和padding，特别是body和html是否被重置 -
position: static不算“已定位”，加了也白加；必须显式写position: relative
如何让 position: absolute 真正相对于父容器？
两步缺一不可：
- 给父容器加
position: relative—— 这是建立定位上下文的唯一方式，不是可选项 - 重置全局盒模型干扰：至少确保
body, html { margin: 0; padding: 0; }，推荐配合* { box-sizing: border-box; } - 注意：父容器的
padding会影响top: 0的实际视觉位置——它从 padding box 边缘起算，不是 content box
父容器加了 position: relative 后高度塌陷怎么办？
这不是 bug，是预期行为：position: absolute 子元素完全脱离文档流，父容器“看不见”它，自然不会把它当高度来源。
- 手动设
min-height或height（仅适用于尺寸固定、可预知的场景） - 用
padding-bottom模拟占位（例如 badge 高 24px，父加padding-bottom: 24px） - 更现代的做法：放弃
absolute + relative组合，改用display: grid配合justify-self: end; align-self: end实现右上角定位，或place-items: center居中——它们不脱离文档流，高度自动撑开
真正容易被忽略的不是怎么写 CSS，而是忘记 position: relative 会创建新的层叠上下文，如果同时设了 z-index（哪怕只是 z-index: 0），就可能意外遮挡兄弟元素或滚动内容。要不要加 z-index，得看它是否真参与堆叠控制，而不是“习惯性补上”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
