absolute元素百分比宽度失效的根本原因是包含块无明确宽度；其宽度需相对于最近非static定位祖先计算，若该祖先宽度为auto则百分比无法解析。
absolute元素用百分比设置宽度时没效果，根本原因是它的包含块（containing block）没有明确的宽度。CSS规范规定：绝对定位元素的百分比宽度，是相对于其最近的position非static祖先元素（即包含块）的宽度计算的。如果这个祖先宽度本身是auto（比如默认的block容器未设宽），那100%就无从算起——结果就是“不生效”。
确认父级是否为非static定位容器
检查你写的position: absolute元素的父级（或向上逐级找），必须存在一个设置了position: relative、absolute或fixed的祖先元素。仅靠display: block或width: 100%不够。
- ✅ 正确示例：
<div style="position: relative; width: 300px;">
<div style="position: absolute; width: 80%;">我能撑满80%</div>
</div> - ❌ 常见错误：
<div> <!-- 没有position，不是包含块 -->
<div style="position: absolute; width: 80%;">→ 百分比失效</div>
</div>
确保包含块本身有可计算的宽度
即使父级加了position: relative，如果它自身宽度是auto且没有约束（比如没设width、没被flex/grid限制、也没内容撑开），那么子元素的width: 50%依然按0计算。
- 给包含块显式设宽：
width: 400px或width: 100%（前提是它的父级有宽） - 用max-width/min-width辅助控制边界
- 在Flex/Grid容器中，确保该祖先元素参与尺寸分配（如设
flex: 1或grid-column: 1 / -1）
替代方案：用left/right代替width（适合铺满型布局）
如果目标只是让absolute元素填满某段水平区域，不用width也能实现：
立即学习“前端免费学习笔记（深入）”；
-
left: 0; right: 0;→ 等效于width: 100%（但更可靠，不依赖父宽计算） -
left: 10px; right: 20px;→ 宽度 = 包含块宽 − 30px，自动响应父级变化 - 配合
top/bottom还能快速做全屏覆盖或侧边栏
基本上就这些。核心就两点：找对包含块，再让它有宽度。不复杂但容易忽略。
