绝对定位元素的 width: 100% 常失效，因其百分比宽度相对于最近已定位祖先计算；若无已定位父级，则相对于 html 计算，导致撑满视口或截断；修复需设父级 position: relative 或改用 left/right。
绝对定位元素的 width: 100% 为什么常常失效
因为 position: absolute 元素的百分比宽度，是相对于其最近的「已定位祖先元素」（即 position 为 relative、absolute、fixed 或 sticky 的父级）计算的。如果祖先没设定位，它就往上找，直到 <html>；而 <html> 宽度通常不是你期望的容器宽，导致 width: 100% 撑满整个视口或意外截断。
- 检查父容器是否设置了
position: relative（最常见修复动作） - 若父容器本身宽度不固定（比如只靠内容撑开），
width: 100%仍可能为 0 —— 此时需显式设父宽，或换用left/right - 避免对
display: inline或未设宽的 flex item 内的绝对定位子元素直接用width: 100%
用 left + right 替代 width 实现真正自适应
当需要元素填满某个有明确左右边界的区域（如带 padding 的卡片内、模态框内容区），left: 0; right: 0 比 width: 100% 更可靠 —— 它强制拉伸到包含块的左右边缘，且不受祖先是否“已定位”之外的其他布局限制影响。
- 配合
top/bottom可同时控制高宽，例如：top: 10px; right: 20px; bottom: 10px; left: 20px自动适应内部留白 - 若只需水平自适应，
left和right已足够，无需设width - 注意：若祖先设置了
overflow: hidden，超出部分会被裁剪，这有时是预期行为，有时是 bug 来源
max-width 如何与百分比协同防溢出
max-width 不会破坏百分比逻辑，而是作为安全上限：当百分比计算出的宽度超过该值，就停在 max-width；否则仍按百分比走。这对响应式弹层、提示气泡、搜索建议下拉等场景很关键。
- 典型写法：
width: 100%; max-width: 320px;（在窄屏下占满，宽屏下不超过 320px） - 若配合
left/right，max-width依然生效，但需注意：此时元素实际宽度 =right - left减去边距，max-width是对其最终渲染宽度的限制 - 慎用
max-width: 100%—— 它等价于无限制，因为百分比宽度本身已受父容器约束
IE8–11 下 absolute + 百分比的兼容细节
IE8 不支持 max-width 在绝对定位元素上的正确计算（尤其当祖先宽为 auto 时），IE9+ 基本正常，但仍有边界 case。若必须兼容 IE8，优先用 left/right + 固定 max-width（如 max-width: 320px），避免依赖 max-width: 100% 或嵌套百分比。
立即学习“前端免费学习笔记（深入）”；
- IE8 中
width: 100%在无已定位父级时，会相对于<body>计算，且<body>默认无宽，结果常为 0 - 可加 hack：
*width: expression(this.parentNode.clientWidth + 'px');（仅 IE7–8），但不推荐，维护成本高 - 现代项目若已放弃 IE，可放心用
left/right+max-width组合，简洁稳定
实际中最容易被忽略的是：绝对定位元素的包含块（containing block）不是视觉父容器，而是最近的已定位祖先。很多“width: 100% 不生效”的问题，根源都在这里，而不是 css 写错了。