absolute元素只设left不设right时宽度会坍缩为0，因left仅定义起点偏移，未约束终点，浏览器按内容最小宽度渲染；需同时设left和right（且父容器有明确宽度）才能自动计算中间可用宽度。
absolute元素只设left不设right时宽度会坍缩为0
只写 position: absolute 和 left: 20px，却不指定 right、width 或其他横向约束，浏览器无法推导该元素的宽度——它会收缩到内容最小宽度（比如一行文字就只占那么宽），甚至在某些情况下渲染为 0×0。这不是 bug，是规范行为：绝对定位元素的尺寸默认由内容决定，没有“自动拉满”逻辑。
- 常见错误现象：
div加了position: absolute; left: 10px;，但背景色看不见、子元素挤成一团、flex子项完全不显示 - 触发条件：父容器无显式宽高 + 子元素内部依赖百分比或
flex: 1（例如width: 100%在一个没宽度的父级里永远算出 0） - 根本原因：
left只定义起点偏移，不定义终点；浏览器不知道你想要多宽，只能退回到 content-based sizing
left + right 同时设置才能让元素横向拉伸
当同时声明 left 和 right（且未设 width），浏览器会把二者当作左右边界约束，自动计算出中间可用宽度。这是唯一一种无需写死像素值就能让绝对定位元素“撑满剩余空间”的原生方式。
- 示例：
position: absolute; left: 80px; right: 20px;→ 元素宽度 = 父容器宽度 − 100px - 注意：
left和right值可以是任意合法单位（px、%、rem），但不能同时为auto（否则宽度坍缩） - 兼容性好，IE8+ 都支持；但若父容器本身宽度为 0（比如高度塌陷的 div），那算出来的宽度仍是 0 —— 所以父级必须有可计算的宽度来源
left/right 与 width 冲突时的优先级规则
如果同时写了 left、right 和 width，浏览器会按 CSS 定位公式处理：当 left + width + right ≠ 父容器宽度时，right 会被忽略（除非 left 和 width 也设为 auto）。这容易导致意外交互。
- 典型误用：
left: 0; right: 0; width: 200px;→ 实际表现是左对齐、宽 200px，right彻底失效 - 安全做法：要么只用
left + right让浏览器自动算宽，要么明确用left + width（此时right不写），避免三者共存 - 想右对齐固定宽元素？用
right: 20px; width: 120px;，别加left
bottom/top 和 left/right 的组合不是万能解法
很多人以为 “top: 0; bottom: 0; left: 0; right: 0” 就等于全屏覆盖，但实际效果取决于父容器是否具有可计算的高度。如果父容器高度来自内容（而内容又是另一个 absolute 元素），这个组合就会失效。
立即学习“前端免费学习笔记（深入）”；
- 问题本质：绝对定位元素的
top/bottom是相对于定位上下文的高度计算的；若上下文高度为 0，bottom: 0就等于top: 0，结果还是高度为 0 - 验证方法：在 DevTools 中选中该元素，看 computed 的
height是否为 0；再往上查它的 offsetParent 的clientHeight - 真正可靠的全屏方案：要么父容器设
height: 100vh，要么改用position: fixed（它直接相对于视口）
left 和 right 更关键。很多“明明写了却没效果”的问题，根源不在子元素，而在它的定位上下文本身是空的。 
