absolute子元素“飞走”是因为未找到定位锚点；浏览器只认position为relative/absolute/fixed/sticky的祖先，static父元素被跳过，最终以视口为包含块。
父元素没设 position: relative（或 absolute/fixed/sticky），position: absolute 子元素就找不到定位锚点，直接飞到视口左上角——这不是 bug，是 CSS 渲染规则的必然结果。
为什么absolute子元素会“飞走”？
浏览器查找定位参考时，只认 position 值为 relative、absolute、fixed 或 sticky 的祖先，static（默认值）完全被跳过。父元素没声明，等于不存在于定位链中，子元素只能继续往上找，直到 或初始包含块。
常见现象：
-
top: 0; left: 0的 badge 出现在浏览器左上角，而不是卡片右上角 - 下拉菜单弹出位置飘在页面顶部，和触发按钮完全错位
- 开发者工具里看到子元素的
Containing block显示为viewport而不是预期父容器
overflow: hidden 为啥不裁剪？
因为裁剪的前提是：父元素既是定位上下文，又是内容包含块。overflow: hidden 只对属于它的包含块内的内容生效；而没设 position: relative 的父元素，压根没创建这个包含块，子元素的定位坐标根本不在它管辖范围内。
所以你写：
.parent { overflow: hidden; }
完全无效。必须写成：
.parent { position: relative; overflow: hidden; }
否则裁剪对象错了，就像给隔壁房间装防盗窗，防不住自己家的贼。
加了position: relative后父容器塌陷了怎么办？
加 position: relative 本身不导致塌陷，但一旦子元素用 position: absolute，它就彻底脱离文档流——父容器“看不见”它，也就不再把它当高度来源。
典型表现：父容器背景色只包住文字，盖不住下面那个绝对定位的图标。
解决思路：
- 给父容器显式设
height或min-height（推荐） - 留一个普通流元素占位，比如空
<div></div> - 把 padding 移到子元素上，避免靠父容器 padding 撑高
- 避免用
transform或filter在同一父级上混用——它们会隐式创建新 containing block，干扰定位基准
最常被忽略的一点：即使父元素写了 position: relative，也可能被全局重置样式（如 * { position: static !important; }）静默覆盖，或者被 JS 动态注入的 position: static 覆盖。务必用开发者工具的 Computed 面板确认最终生效的 position 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
