width: 100% 在 position: absolute 元素上失效是因为它相对于最近已定位祖先而非视觉父容器；若无已定位祖先，则参考 ，导致宽度异常。
为什么 width: 100% 在 position: absolute 元素上经常失效
因为它不是相对于视觉上的“父容器”，而是相对于**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）。如果父容器没设定位，浏览器会一路往上找，最终落到 上——而 的宽度通常是视口宽，不是你期望的卡片或弹层宽度。
常见错误现象：.card { width: 320px; } 里放一个 position: absolute 子元素并设 width: 100%，结果它撑满整个屏幕。
- 用浏览器 DevTools 的 “Computed” 面板检查
width的 actual value 和 reference box，能立刻确认参考系是谁 - 别只看 HTML 结构层级，要查 CSS
position层级链 - Flex 或 Grid 容器本身不自动提供定位上下文，哪怕它是父级，也得手动加
position: relative
怎么让 width: 100% 真正指向你想要的父容器
核心动作：给**直接父容器**加 position: relative（最安全、副作用最小）。
示例：
.parent {
position: relative;
width: 300px;
padding: 16px;
}
.child {
position: absolute;
width: 100%; /* 此时 = 300px，不是父容器 content box 宽 */
}
- 如果父容器宽度是 auto（比如只靠内容撑开），
width: 100%仍可能算出 0 —— 这时需显式设父宽，或换用left/right -
position: absolute子元素的width: 100%永远不会受父容器padding影响；它算的是父容器的 border box 宽度 - IE8 下若父容器宽为 auto，
width: 100%可能回退到计算，且默认无宽，结果常为 0
left: 0; right: 0; 比 width: 100% 更可靠
当目标是填满某个有明确左右边界的空间（如带 padding 的模态框内容区、卡片内浮层），left: 0; right: 0; 不依赖定位上下文是否“正确建立”，它直接拉伸到包含块的左/右边缘。
它还天然兼容留白控制：
.popup {
position: absolute;
left: 20px;
right: 20px;
top: 10px;
/* width 不用写，会被忽略 */
}
- 同时设
left和right时，width属性会被浏览器忽略，实际宽度 = 包含块宽度 − left − right - 若父容器设了
overflow: hidden，超出部分会被裁剪——这有时是预期行为（防溢出），有时是 bug 来源 -
max-width依然生效，但限制的是最终渲染宽度（即right − left算出的值），不是百分比计算值
max-width 和百分比怎么协同防溢出
max-width 是安全阀，不是替代方案。它不破坏百分比逻辑，只在计算结果超过阈值时介入。
典型组合：
.tooltip {
position: absolute;
width: 100%;
max-width: 280px;
}
- 窄屏下
width: 100%生效，占满父容器；宽屏下不超过280px - 配合
left/right时，max-width限制的是right − left的结果，不是父容器宽 -
max-width: 100%等价于没设，因为百分比宽度本身已受父容器约束；真要限制，写具体像素值（如max-width: 320px） - IE8 不支持
max-width在绝对定位元素上的动态计算（尤其父宽为 auto 时），必须降级为固定值
真正容易被忽略的点：很多开发者调了半天 width 和 max-width，却忘了检查父级有没有形成定位上下文——哪怕只差一层 position: relative，整个参考系就错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
