绝对定位元素width:100%不继承父宽，因其参照包含块而非视觉父元素；需父元素设position:relative（非static）并具备可计算宽度，才能使100%生效。
绝对定位元素不继承父宽度的根源
绝对定位元素脱离文档流，width: 100% 默认参照的是其**包含块（containing block）**，而非视觉上的父元素。如果父元素没有显式设置 position（如 relative、absolute 或 fixed），浏览器会向上查找最近的「已定位祖先」；找不到时，就回退到初始包含块（通常是视口），此时 width: 100% 就变成占满整个窗口，而不是你期望的父容器宽度。
让父元素成为包含块的关键操作
必须给父元素加 position: relative（或其他非 static 值），才能让它成为子元素的包含块。仅设 width: 100% 不起作用——因为没解决“参照谁”的问题。
-
position: relative最常用：不影响布局，只建立新包含块 - 避免用
position: absolute给父元素：它会脱离文档流，可能破坏原有结构 - 父元素若本身是 flex / grid 容器，仍需
position: relative才能作为包含块
示例：
.parent {
position: relative; /* 必须加 */
width: 300px;
}
.child {
position: absolute;
width: 100%; /* 现在才真正继承 .parent 的 300px */
}
width: 100% 在绝对定位下的实际行为
width: 100% 对绝对定位元素生效的前提是：包含块有明确宽度。如果父元素宽度由内容撑开（比如没设 width 且是 display: inline-block），那 100% 可能计算为 0 或不可预期值。
- 确保父元素有**可计算的宽度**：显式
width、max-width，或受父级约束（如 flex item） - 不要依赖
left: 0; right: 0替代width: 100%：它会让元素拉伸填充左右边界，但若父元素有 padding，会导致溢出 - 若需响应式，优先用
left: 0; right: 0配合box-sizing: border-box，比width: 100%更鲁棒
常见错误现象与排查点
遇到“绝对定位元素没占满父级”，先检查这些：
- 父元素是否漏了
position: relative？这是最常被忽略的一环 - 父元素的
width是否为auto且无约束？比如在float环境中未清除浮动，导致宽度塌陷 - 开发者工具里看 computed width：如果显示
0px或NaN，说明包含块宽度不可计算 - 嵌套多层绝对定位时，确认是哪一层成了包含块——浏览器不会跳过中间的
static父级
复杂点在于：包含块的确定规则和 width 计算逻辑是两套独立机制，得同时满足才有预期效果。漏掉任意一个，width: 100% 就只是个无效声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
