position: absolute元素“跑出父容器”是因为它定位参考的是最近的非static祖先（包含块），而非dom父元素；若父级未设position:relative等，则默认相对于html根元素定位。
为什么 position: absolute 元素总“跑出父容器”？
因为它根本没在找你写的那个“父元素”，而是在找最近的 position 值不为 static 的祖先——也就是它的包含块。如果父级没设 position: relative（或 absolute/fixed/sticky），浏览器就会一路往上查，直到 html，最终元素相对于视口定位，看起来就像“飘到页面左上角”。
这不是 bug，是标准行为。关键在于：你不能假设 DOM 层级 = 定位参考层级。
- 只要父元素没显式设置非
static的position，它就不是包含块 -
position: relative是最安全的选择——它不改变元素位置，但能创建包含块 - 别用
position: static（默认值）或没写position的父元素做参考
position: relative 作为包含块的实操要点
给父容器加 position: relative 是最常用、也最不容易出错的方式。但它不是“装饰性”的，而是功能性的定位锚点。
- 不需要配
top/left等偏移值，空写position: relative就够了 - 父容器必须有明确的尺寸（如
width/height）或内容撑开，否则子元素的top: 0; left: 0可能视觉不可见 - 避免在父容器上同时用
transform（如scale或rotate），某些旧版浏览器中这会意外创建新的包含块，导致偏移计算异常 - 如果父容器本身是
display: flex或grid，仍需加position: relative—— 布局模式不影响包含块判定逻辑
嵌套绝对定位时的包含块链判断
当多个 position: absolute 元素嵌套时，每个子元素只认自己**直接向上第一个**非 static 祖先，不会跳过中间层。容易误以为“爷爷设了 relative，孙子就能相对爷爷定位”，其实不然。
- 如果结构是
.grandpa { position: relative; } → .dad { } → .child { position: absolute; }，那么.child的包含块是html（因为.dad是static） - 正确链路应是：
.grandpa { position: relative; } → .dad { position: relative; } → .child { position: absolute; }，此时.child相对.dad，而非.grandpa - 想让
.child直接相对.grandpa，就删掉.dad这一层，或把.dad的position改成static（即不写）
用 transform 补位比硬调 top/left 更可靠
当你需要居中、对齐边缘或响应式微调时，纯靠 top/left 容易受父容器 padding、border 或字体渲染差异影响。这时候 transform 是更鲁棒的辅助手段。
-
top: 50%; left: 50%; transform: translate(-50%, -50%);比top: 100px; left: 150px;更适应尺寸变化 - 右上角图标常用：
top: 0; right: 0; transform: translate(50%, -50%);，避免因父容器padding-right导致偏移不准 - 注意：
transform不影响包含块判定，它只是视觉重绘，所以必须配合正确的包含块前提才有效
真正卡住人的从来不是 absolute 本身，而是忘记检查“谁才是它的包含块”。每次写完 position: absolute，花两秒按 F12 打开开发者工具，鼠标悬停在元素上，看 computed 面板里的 Containing Block 显示的是哪个节点——这个习惯比背口诀管用十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
