根本原因是absolute元素脱离文档流后按规范以“内容最小宽度”计算尺寸，若无内容或未设width且包含块不明确，浏览器即渲染为0px；必须确保最近非static祖先（如position: relative父容器）存在且有明确宽度，并配合left/right或width显式控制。
为什么absolute元素宽度会变成0
根本原因不是CSS写错了，而是浏览器按规范执行：脱离文档流后，position: absolute元素默认用“内容最小宽度”计算尺寸。如果里面是空标签、纯span、或子元素也absolute，又没设width，它就真会缩成0px宽——不是bug，是预期行为。
常见触发场景：top: 50%; left: 50%; transform: translate(-50%, -50%)居中一个空div；Vue/React初始渲染时内容还没插入；父容器没设position: relative，导致包含块变成body，left: 0; right: 0撑满整个视口而非局部。
left和right同时设置比width: 100%更可靠
left: 0; right: 0能强制填满包含块的可用水平空间，且不受父容器padding影响（width: 100%会包含padding），但前提是包含块本身有明确宽度。
- 必须先确保最近的非
static祖先（通常是父容器）设了position: relative - 如果父容器是
display: flex或grid，它本身宽度可能为auto，此时left/right仍无效——得先给父容器加width或max-width - 别和
width混用：width优先级更高，一旦设了，left/right可能被忽略 - 响应式推荐写法：
left: 1rem; right: 1rem; max-width: 600px;，比width: 80%更可控
Flex/Grid容器里absolute子项宽度为0怎么办
在display: flex或display: grid父容器中直接放position: absolute子元素，极易出现width和height都为0——因为flex/grid不参与绝对定位元素的尺寸计算，而子项又没内容或没显式尺寸。
- 错误写法：
<div class="flex"><div class="abs"></div></div>（.flex没position: relative） - 正确做法：加一层
position: relative的wrapper，让absolute元素相对它定位，wrapper本身仍是flex/grid项目 - 必须显式控制尺寸：
inset: 0、width: 100%或left: 0; right: 0三选一，不能只靠内容撑 - 若内容为空但需占位，加
min-width: 1px或伪元素::before { content: ""; display: block; }
最容易被忽略的关键点：包含块到底是谁
90%的“撑不开”问题，根子不在absolute本身，而在没确认它的包含块。Chrome DevTools 的「Computed」面板里看「Containing Block」字段，常发现它其实是body或某个意外设了position: absolute的中间层。
检查顺序必须是：父容器有没有position: relative → 中间有没有某层写了position: absolute打断了包含块链 → 包含块自身宽度是否为auto（比如没设width的div）。漏掉任何一环，left/right或width都只是在空中写代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
