只设 left 宽度为 0px 是因为 left 是位置偏移而非尺寸指令，浏览器无法确定右边界，触发 shrink-to-fit 规则导致元素收缩；必须同时设置 left 和 right 才能自动计算宽度。
为什么只设 left 宽度就变成 0px
因为 left 是位置偏移，不是尺寸指令。浏览器只知道“从左边挪 20px”，但完全不知道右边停在哪——没右边界，就只能退回到“收缩包裹内容”（shrink-to-fit）规则：空元素变 0px，单行文字只占几个像素，视觉上直接消失。
常见触发场景：
-
top: 50%; left: 50%; transform: translate(-50%, -50%)居中一个空<div> - 父容器没设
width，子元素又只写了left: 1rem，没配right - 动态插入内容前 JS 就读取了
offsetWidth，返回 0
left 和 right 同时设才真正拉伸宽度
这是唯一不写死像素、又能自动填满的原生方式。当 left 和 right 都存在（且没设 width），浏览器会用“包含块内容区宽 − left − right”算出中间宽度。
实操要点：
立即学习“前端免费学习笔记（深入）”；
-
left: 0; right: 0等效于“铺满父容器内容区”，比width: 100%更稳——它不依赖父级是否已有宽度，也不受父级padding影响 -
left: 10px; right: 10px自动留白，等效width: calc(100% - 20px)，但无需计算且兼容性更好 - ⚠️ 如果同时写了
width，left/right可能被忽略或冲突，优先级更高的是width - 必须确保父容器是已定位元素（如
position: relative），否则包含块是body，宽度变成整个视口
width: 100% 为什么经常失效
它不是“占满父容器”，而是“占满最近已定位祖先的内容区宽度”。如果那个祖先本身宽度为 0（比如没设宽的 <div>，或只含 absolute 子项的父容器），那 100% 就等于 0。
典型失效链：
- 父容器是
position: absolute但没设left/right或width→ 自身宽度为 0 - 父容器是 flex item，但主轴没约束尺寸（如
flex: 1却在无宽度上下文中）→ 无法推导宽度 - 父容器为空，或只含 absolute 子元素 → 渲染后宽度塌陷 →
width: 100%失效
调试时直接看 DevTools 的 Computed 标签页，确认该元素的 width 是否真为 0px，再往上查它的包含块是不是你预期的那个父元素。
真正容易被忽略的点：包含块到底是谁
position: absolute 的一切尺寸都锚定在「最近的非 static 祖先」上。这个祖先一旦错位，所有宽度逻辑都会偏移——比如你写了 left: 0; right: 0，但父容器漏了 position: relative，那它就相对于视口定位，宽度变成整个屏幕宽，而不是你想要的父容器宽。
别指望浏览器自动猜你想要多大。塌陷不是缺陷，是 absolute 的契约：你得给明确锚点、明确边界、明确参照。否则它就按规范收缩到最小，连一丝犹豫都不会有。
