position: absolute元素“消失”是因脱离文档流导致父容器高度塌陷；需通过min-height、伪元素或padding等主动占位，而非仅设parent为relative。
position: absolute 元素为啥“消失”了
因为脱离文档流后，父容器默认不给它留空间，高度塌陷，看起来像被删掉一样。
- 常见错误现象：
position: absolute的子元素看不见，或父div高度为 0 - 根本原因：绝对定位元素不参与父容器的高度计算，父级“不知道”它存在
- 不是加
height就能解决——硬设高度会破坏响应性，且无法适配内容变化
父容器加 position: relative 是占位前提
只有父级有定位上下文（relative / absolute / fixed），absolute 子元素的 top/left 才相对它计算；更重要的是，这会让浏览器承认“这个父级是它的定位容器”，但——仍不自动占位。
-
position: relative本身不改变布局，也不产生高度，只是创建定位上下文 - 它只是“允许子元素用
absolute定位”，不是“让父级包裹住子元素” - 漏写这句，子元素会往上层有定位的祖先找参考，极易错位
真正让父级“感知”子元素的三种做法
靠父级自己生成占位，而不是依赖子元素回填。
- 用
min-height预留最小空间（适合高度可预期的场景）：parent { min-height: 200px; } - 用伪元素撑开（兼容性好，无额外 DOM）：
parent::after { content: ""; display: block; height: 200px; } - 用
padding-bottom或padding-top模拟内容高度（简单直接，但需知道大致尺寸） - 注意：不能用
height: 100%，父级高度若由内容撑开，100% 会变成 0
更现代的解法：避免用 absolute 强行占位
如果目标只是“右上角图标”“悬浮按钮”这类视觉定位，但又希望父容器正常包裹内容，absolute 往往是过重方案。
- 优先考虑
float+ 清除（老项目）、display: flex+margin-left: auto（如右对齐按钮） - 用
position: sticky替代部分absolute场景（比如表头吸附） - 真要绝对定位又需父级撑高？说明设计意图和布局逻辑可能冲突——这时候该质疑的是“为什么必须绝对定位”，而不是“怎么骗父级留空”
relative 就以为万事大吉，其实那只是第一步。真正难的是判断：这个元素到底该由谁负责高度，以及是否真的非 absolute 不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
