position: absolute 未按父元素定位是因为父元素未提供定位上下文；必须给父元素显式设置 position: relative（或其他非 static 值）才能使其成为定位参照物。
position: absolute 为什么没按父元素定位？
子元素加了 position: absolute，却飞到页面左上角去了——不是因为你写错了，而是父元素默认没“提供定位上下文”。position: absolute 的参照物是**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的父级），不是所有父元素都算数。
常见错误现象：top: 0; left: 0 把子元素顶到整个视口左上角，而不是父容器左上角。
- 必须给直接父元素显式设置
position: relative（最常用且安全）或其他非static值 - 不要依赖
display: flex或display: grid父容器自动触发定位上下文——它们不会 - 如果父元素本身是
position: absolute，要小心它的定位基准是否又跳到了更上层
relative 和 absolute 搭配时的边界陷阱
position: relative 看似“不动”，但它会**占据原始文档流位置**；而 position: absolute 子元素一旦脱离文档流，就不再影响父元素高度。这在响应式布局或内容动态加载时特别容易出问题。
使用场景：下拉菜单、气泡提示、覆盖按钮等需要“贴着父容器某角”但又不撑开父容器的场合。
- 父元素若无固定高度，且子元素全用
absolute，父容器可能塌成一条线（高度为 0） -
top/bottom和left/right同时设值时，会强制拉伸子元素——这不是 bug，是规范行为，但常被误认为“错位” - 移动端慎用
bottom: 0配合键盘弹出，iOS Safari 有时会把absolute元素卡在键盘上方不动
transform 能替代 top/left 吗？什么时候该换
用 transform: translate() 移动 absolute 元素，视觉效果一样，但渲染机制不同：它不触发布局重排（layout），只触发合成（composite），性能更好，尤其适合动画。
但别无脑替换——transform 改变的是元素自身的坐标系，不影响 top/left 的计算逻辑，也不改变元素在定位上下文中的“锚点”。
- 如果只是静态偏移（比如居中一个图标），
top: 50%; transform: translateY(-50%)比纯top更可靠 - 动画中优先用
transform+will-change: transform，避免频繁 layout 触发卡顿 - 注意：
transform会让元素脱离普通文档流的“尺寸感知”，getBoundingClientRect()返回的位置仍是原始定位框，不是变换后的位置
z-index 不生效？先查这三件事
z-index 只对**已定位元素**（position != static）有效，而且它的层级比较只发生在**同一个层叠上下文内**。父子之间 z-index 再大，也压不过父元素所在的层叠上下文。
最容易被忽略的点：opacity
- 检查父元素是否无意中触发了新层叠上下文（比如加了
opacity: 0.99） - 确保目标元素和参照元素在同一个层叠上下文中，否则 z-index 彼此无关
- 不要迷信数字大小——
z-index: 9999在子层叠上下文中，依然会被父层叠上下文里z-index: 1的兄弟元素盖住
真正难的不是记住 position 的取值，而是每次写之前，得想清楚：这个父元素是不是定位上下文？它有没有被其他属性悄悄新建了层叠上下文？子元素脱离流之后，父容器的高度还靠不靠谱？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
