不是bug，是规范行为：absolute元素未设width且仅设left时，因缺少右边界约束而按内容收缩包裹，导致宽度塌陷为0px；必须同时设置left和right才能触发浏览器自动计算中间宽度。
不是 bug，是浏览器按规范执行的结果：position: absolute 元素脱离文档流后，若没显式设 width，且没同时指定 left 和 right，它就按“收缩包裹内容”（shrink-to-fit）规则算宽——内容越少，宽度越小，空元素甚至可能变成 0px。
为什么只设 left 宽度就塌了
只写 left: 20px，不写 right 或 width，浏览器只知道“从左边偏移 20px”，但不知道“右边停在哪”。它只能退回到内容最小宽度，比如一行字就只占几个像素，视觉上像消失了。
- 常见现象：
background-color看不见、子元素挤成一团、flex子项完全不显示 - 触发条件：父容器没设宽高 + 内部内容又不带固有尺寸（如纯
span、空div） - 根本原因：
left是位置偏移，不是尺寸约束；浏览器没收到“我要多宽”的明确信号
left 和 right 同时设才能拉伸
当 left 和 right 都存在（且没设 width），浏览器会把二者当作左右边界，自动算出中间可用宽度。这是唯一不用写死像素就能让绝对定位元素“填满横向空间”的原生方式。
- 示例：
left: 10px; right: 10px;→ 宽度 = 父容器内容区宽 − 20px - 必须确保父容器是已定位元素（如
position: relative），否则会相对于body或视口计算，结果不可控 - 注意：
left和right不能都为auto，否则宽度坍缩
为什么 width: 100% 有时也不管用
width: 100% 是相对于最近已定位祖先的内容区宽度计算的。如果那个祖先本身宽度为 0（比如没设宽的 div，或只含绝对定位子元素的父容器），那 100% 就等于 0。
- 典型场景：父容器是
display: flex，但没设主轴尺寸约束；或父容器是position: absolute却没设width或left/right -
width: 100%还受父级padding影响，而left: 0; right: 0不受影响 - 若父容器宽度来自
max-width或媒体查询，width: 100%会跟随变化，left/right同样适用，但更稳定
最容易被忽略的点：包含块到底是谁
position: absolute 的一切尺寸都锚定在「最近的非 static 祖先」上。这个祖先一旦错位，所有宽度逻辑都会偏移——比如你写了 left: 0; right: 0，但父容器没设 position: relative，那它就相对于视口定位，宽度变成整个屏幕宽，而不是你想要的父容器宽。
调试时先打开 DevTools 的 Computed 标签页，确认该元素的 width 和 height 是否真为 0px，再检查它的包含块是不是你预期的那个父元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
