因为子元素设置了 position: absolute 后，它脱离了标准文档流，其宽度计算不再受父级内容宽度的约束，而是取决于包含块（通常是最近的定位祖先）的边界。要让绝对定位的子元素填满父级，必须显式设置 left: 0、right: 0 或 width: 100%，并配合父级使用 position: relative 来确立包含块。
为什么绝对定位会失去继承的宽度？
当子元素应用 position: absolute 时，浏览器在布局阶段将其从正常流中移除。此时，子元素的尺寸计算逻辑发生变化：如果没有指定 width，它会收缩到内容的自然宽度；如果指定了 width: 100%，这个百分比是相对于包含块的 padding-box 计算的，而不是像普通流那样自动撑满剩余空间。因此，仅靠 width: 100% 往往不够，还需要通过 left 和 right 属性来拉伸元素以覆盖整个宽度。
div.parent {
position: relative;
width: 300px;
height: 200px;
background: #eee;
}
div.child {
position: absolute;
left: 0;
right: 0;
/* width: 100%; 可选，left/right 已决定宽度 */
height: 50px;
background: blue;
}
如何正确设置父级与子级的定位关系？
确保父级元素具有非 static 的定位值（如 relative），这样子元素的 absolute 才会相对于父级进行定位。同时，通过设置 left: 0 和 right: 0，强制子元素在水平方向上拉伸至包含块的边缘。这种方法比单纯依赖 width: 100% 更稳健，因为它直接定义了元素的边界。
/* 父级 */
.container {
position: relative;
width: 100%;
}
/* 子级 */
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
}
如果父级没有明确宽度，绝对定位子元素的行为是什么？
当父级元素没有明确的宽度（例如宽度为 auto 或依赖于内容）时，绝对定位子元素的 left: 0 和 right: 0 将相对于父级的 padding box 进行计算。如果父级是块级元素且未设置宽度，其宽度由内容决定，那么子元素也会收缩到该内容的宽度。若希望子元素撑满视口或特定容器，需确保祖先链中存在一个有明确尺寸的包含块，或者直接使用 vw 等单位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
