父元素必须设非static定位（如position: relative）才能为absolute子元素提供定位上下文；否则子元素会向上查找已定位祖先或视口。居中方案依宽高是否固定而定：已知用margin负值，未知用transform，父可改则用flex。
子元素在父元素中定位，核心就一条：**父元素必须提供定位上下文，否则 position: absolute 会“飘”到最近的已定位祖先或视口去**。
为什么 position: absolute 不按父元素定位？
浏览器查找定位参考时，会逐级向上找 position 值不为 static 的祖先。如果父元素没设 position（默认就是 static），它就直接跳过，继续往上找 —— 这就是子元素“飞出父容器”的根本原因。
- 常见错误：只给子元素写
position: absolute; top: 20px; right: 10px;，却忘了父元素 - 正确做法：父元素加
position: relative;（或其他非static值），不改变布局，但创建了定位上下文 -
position: relative本身不偏移，除非你显式写top/left等，所以它是最安全的“占位型”定位方式
怎么让子元素水平垂直居中？
有几种可靠方案，选哪个取决于子元素宽高是否固定：
- 宽高已知 → 用
top: 50%; left: 50%; margin-top: -Xpx; margin-left: -Ypx;（X/Y 是子元素宽高一半） - 宽高未知或动态 → 用
top: 50%; left: 50%; transform: translate(-50%, -50%);，transform中的百分比基于自身尺寸，安全通用 - 父元素能改样式 → 直接上
display: flex; justify-content: center; align-items: center;，最简洁，但要求父容器可加flex
想左右对齐两个子元素，但不能动父元素样式？
当父元素宽度固定、且明确禁止修改其 position 或 display 时，float 是兼容性好又可控的选择：
- 左子元素：
float: left; - 右子元素：
float: right; - 必须清除浮动影响：在它们之后的第一个兄弟块级元素上加
clear: both;，否则后续内容会上浮错位 - 注意：浮动元素脱离文档流，父容器若无高度（如仅靠内容撑开），可能塌陷；此时可加
overflow: hidden;或display: flow-root;触发 BFC
容易被忽略的关键点
很多问题不是代码写错了，而是漏掉了隐含约束：
-
position: absolute的子元素，如果父元素没有position: relative，它可能相对于body或某个中间section定位，DevTools 里看 computed 的offsetParent才知道真正参考谁 -
transform: translate()和margin混用时，顺序会影响最终位置（先left: 50%再translate(-50%)是标准组合，反了会偏移） - Flex/Grid 虽然方便，但一旦父容器没设
display: flex或display: grid，所有子元素上的flex/justify-self都是无效声明，连 warning 都不会报
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
