absolute必须套在relative里，否则会向上查找首个定位祖先或贴到body上，导致定位错乱；relative容器不强制设宽高，但多数场景需设定以明确absolute的定位范围。
absolute 为什么必须套在 relative 里才好用
不加 position: relative 的父容器，absolute 会一路往上找第一个有定位（relative、absolute、fixed）的祖先，找不到就贴到 body 上——这几乎总是意外结果。
常见错误现象：absolute 元素飘到页面左上角、脱离预期区域、随滚动“飞走”。
- 只给子元素设
position: absolute，父元素完全没设position→ 定位基准失效 - 父元素用了
position: static（默认值）→ 等同于没定位，不起作用 - 父元素是
position: fixed或position: sticky→ 基准变了，可能不符合布局意图
relative 容器要设宽高吗？什么时候必须设
不设宽高也能用，但多数时候你需要它“撑开空间”或“划定边界”。relative 本身不改变文档流，但它作为 absolute 的参考系，其尺寸直接影响子元素的 top/right/bottom/left 计算范围。
使用场景举例：下拉菜单、气泡提示、图标右上角徽标（badge）、卡片内悬浮操作按钮。
- 如果父容器是空的或高度由内容撑开，又没设
min-height或padding→absolute子元素可能“压扁”或溢出不可见 - 如果父容器宽度是
fit-content或inline-block→right: 0可能跑到容器外边去 - 响应式中父容器用
max-width但没设width: 100%→absolute的百分比定位会按 viewport 算，不是按父容器
top/left 和 transform 同时用会怎样
会叠加计算。比如 top: 20px; transform: translateY(-50%)，最终位置是先下移 20px，再向上挪自身高度一半——不是“居中于父容器”，而是“偏移后居中”。容易误判最终坐标。
性能影响：transform 触发合成层（通常更流畅），而 top/left 触发 layout + paint（尤其在频繁动画时卡顿明显）。
- 想做平滑移动动画，优先用
transform: translate()，别靠top/left -
top: 50%; transform: translateY(-50%)是垂直居中的常用组合，但前提是父容器有明确高度，且子元素不能是display: inline - 如果父容器用了
scale()或其他 transform →absolute子元素的transform会受其影响（嵌套变换），调试起来很隐蔽
z-index 在 relative + absolute 组合里为什么失效
z-index 只在同一个层叠上下文（stacking context）里生效。一旦父容器设了 position: relative 且带 z-index（哪怕只是 z-index: 0），它就创建了新的层叠上下文——子元素的 z-index 只在这个小环境里比较，不再和外部兄弟元素竞争。
典型踩坑：弹窗盖不住导航栏、tooltip 被隔壁卡片遮住、多个 absolute 元素堆叠顺序错乱。
- 父容器设了
z-index: 1，子absolute设z-index: 9999→ 没用，它最大只能盖过父容器内部其他元素 - 想让某个
absolute“破圈”盖到全局，得把它提到更高层的相对定位容器里，或者去掉父容器的z-index - Flex/Grid 容器内部的
absolute子元素，即使父没设z-index，也可能因隐式层叠上下文（如 opacity
最麻烦的不是写法，是嵌套多层 relative 容器时，每个都可能悄悄创建层叠上下文；加上 transform、opacity、filter 这些“隐形触发器”，z-index 就像迷宫里的灯，看着亮，照不到关键路口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
