position: absolute使元素脱离文档流并相对于最近已定位祖先定位；若无已定位祖先则相对body定位，需配合top/left等属性及父级position: relative才能精准控制位置。
position: absolute 不是模板特性，而是 CSS 定位机制——它不管 HTML 是不是模板、有没有 <template>，只要元素被渲染进文档流，规则就生效。
为什么 top/left 设了却没动？
最常见原因：父容器没设 position: relative（或 absolute/fixed）。position: absolute 会向上查找「最近的已定位祖先」，默认所有元素都是 position: static，所以一查就落到 <body> 上，视觉上像“飞走”了。
- 用浏览器开发者工具检查该元素的
offsetParent，能立刻确认参考容器是谁 - 给直接父级加
position: relative即可，哪怕它不需要偏移 - 别指望
display: flex或display: grid父容器自动成为定位上下文——它们不是「已定位祖先」
如何让绝对定位元素真正居中？
只写 top: 50%; left: 50% 是错的：它把元素左上角移到中心，不是整体居中。必须回拉自身宽高一半。
- 可靠写法：
top: 50%; left: 50%; transform: translate(-50%, -50%) - 不依赖元素尺寸，兼容 IE9+，适用于动态内容（如弹窗、加载图标）
- 避免用
margin-left/margin-top负值——改个宽度就得同步调 margin，极易漏掉
绝对定位后，后面的内容塌上来了怎么办？
因为 position: absolute 元素彻底脱离文档流，父容器若无其他流内内容撑高，就会坍缩为 0，导致后续内容上移。
立即学习“前端免费学习笔记（深入）”；
- 核心解法：确保父容器有高度——比如保留一张
position: static的主图作为“锚点” - 或用伪元素
::before+content+ 显式height占位 - 慎用
min-height，它可能在小屏下留白过多；优先让真实内容参与布局
真正难的不是写对那几行 CSS，而是意识到：一个没设 position 的 wrapper、一个无意加上的 filter: blur(1px)（会隐式创建新层叠上下文），都可能让整个定位逻辑失效。这些细节比语法本身更常决定成败。
