绝对定位元素尺寸异常的根本原因是脱离文档流后浏览器无法自动推导宽高，必须手动设置left/right/width/height等约束；父容器高度为0时无视绝对定位子元素，需js计算或伪元素占位。
绝对定位元素尺寸异常，根本原因不是写错了CSS，而是它脱离文档流后，浏览器不再按常规盒模型规则推导宽高——必须手动干预。
为什么只设 left 会导致宽度坍缩为 0？
只写 position: absolute 和 left: 20px，却不设 right、width 或其他横向约束，浏览器无法确定该元素该有多宽。它会退回到“内容最小宽度”逻辑：一行文字就只占那么宽，空 div 可能直接渲染成 0×0。
-
left只定义起点偏移，不定义终点；right才是隐式定义终点的必要条件 - 若父容器本身宽度为 0（比如高度塌陷的
div），那就算写了left和right，算出来的宽度仍是 0 - 想让元素横向拉伸，唯一轻量解法是同时设
left和right，例如：left: 80px; right: 20px;→ 宽度 = 父宽 − 100px
图片或子元素尺寸失控，是不是漏了 width 和 height？
绝对定位的 img 或 div 在脱离文档流后，width: 60% 仍有效（百分比相对父容器计算），但若没设 height，浏览器可能按原始比例撑开、或因旋转/缩放触发意外渲染——尤其在响应式场景下。
- 务必显式设置
width和height，哪怕用auto也要配合max-width/max-height限幅 - 对图片，优先用
object-fit: contain或cover配合固定容器尺寸，而不是依赖width/height百分比 - 注意
box-sizing：如果父容器是content-box，padding和border会挤占内容区，导致实际显示宽度小于预期
父容器高度为 0，但子元素明明看得见？
这不是 bug，是规范行为：position: absolute 元素完全脱离文档流，父容器计算高度时直接忽略它们。背景色不显示、兄弟元素上移、getBoundingClientRect().height 读出来是 0，全是因为这个。
- 别指望
min-height自动适配——它只是兜底值，不会感知绝对定位子元素的实际布局边界 - 若子元素尺寸固定，手动设
height最可控；若动态变化，必须用 JS 读取所有子元素的getBoundingClientRect().bottom，取最大值后赋给父容器style.height - 插入伪元素占位（如
.parent::before { content: ""; display: block; height: 80px; }）仅适用于静态场景，且伪元素必须设display: block和显式height或min-height
真正容易被忽略的点是：绝对定位元素的尺寸问题，从来不是单个属性能解决的。它总是牵扯到父容器是否形成有效包含块、是否有可计算的宽高来源、以及你是否混淆了“视觉位置”和“布局参与”。改一个 left 值不如先确认 position: relative 是否落在正确层级上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
