绝对定位元素宽度塌陷不是bug，而是规范行为：未设width且未同时指定left和right时，浏览器按shrink-to-fit规则收缩包裹内容，空元素或纯inline内容时width为0px；必须同时设置left和right（父容器需position:relative）才能触发自动计算中间宽度。
绝对定位元素宽度塌陷不是 bug，是浏览器严格按规范执行的结果：它脱离文档流后，若没显式设 width，又没同时指定 left 和 right，就只能按“收缩包裹内容”（shrink-to-fit）计算宽度——空元素或纯 inline 内容时，width 就真会变成 0px。
为什么只写 left 宽度就没了？
只设 left: 20px，浏览器只知道“从左边偏移 20px”，但完全不清楚右边边界在哪。它没有尺寸约束信号，只能退回到内容最小宽度。常见表现包括：background-color 看不见、子元素挤成一条线、offsetWidth 返回 0。
- 触发条件通常是：父容器没设
position: relative，且内部是空div、纯span或无换行文本 -
top: 50%; left: 50%; transform: translate(-50%, -50%)居中一个空容器时，塌陷最典型 - DevTools 的 Computed 面板里看
width和height是否真为0px，比猜更可靠
left 和 right 同时设才能自动拉伸
这是唯一不写死像素、又能让绝对定位元素横向铺满的原生方式。浏览器把 left 和 right 当作左右锚点，反推中间可用宽度。
-
left: 0; right: 0→ 宽度 = 包含块内容区宽（等效但比width: 100%更稳） -
left: 1rem; right: 1rem→ 宽度 = 包含块宽 − 2rem，响应式友好 - ⚠️ 如果同时写了
width，width会优先生效，left/right可能被忽略或引发冲突 - 必须确保父容器是已定位元素（如
position: relative），否则包含块是body，宽度变成视口全宽
width: 100% 为什么经常失效？
width: 100% 是相对于最近已定位祖先的内容区宽度计算的。如果那个祖先本身宽度为 0（比如没设宽的 div，或只含 absolute 子项的父容器），那 100% 就等于 0。
- 常见于：父容器是
display: flex但没设主轴尺寸；或父容器是 absolute 且自身也没设left/right -
width: 100%受父级padding影响，而left: 0; right: 0不受影响 -
width: fit-content在 Safari 14.1 以下不支持，width: max-content兼容性更差，上线前务必查 CanIUse
真正容易被忽略的，不是怎么写 CSS，而是没确认「谁是包含块」——position: absolute 的一切尺寸都锚定在最近的非 static 祖先上。这个祖先一旦错位，所有宽度逻辑都会偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
