absolute元素width: 100%不生效是因为其百分比宽度相对于最近定位祖先计算，若父容器无position属性，则回溯至；需确保父级有relative/absolute/fixed/sticky定位上下文。
absolute元素设width: 100%为什么经常不生效
因为position: absolute会脱离文档流，其百分比宽度是相对于**最近的定位祖先元素**（即position为relative、absolute、fixed或sticky的父级）计算的。如果父容器没设position，浏览器会一直往上找，最终可能落到上——而宽度通常不是你想要的“父容器宽度”。
必须给父容器加position: relative吗
不一定非得是relative，但必须是**有定位上下文的祖先**。常见做法是给直接父容器加position: relative，原因如下：
- 它不改变元素原本布局位置，副作用最小
- 能明确建立定位上下文，避免意外继承到更外层容器
- 比
absolute或fixed更安全，不会让父容器脱离文档流
示例：
.parent { position: relative; width: 300px; }
.child { position: absolute; width: 100%; } /* 此时width=300px */
width: 100% + left/right同时设置会怎样
当left和right都显式设值（比如left: 0; right: 0;），且width也设为100%时，width会被浏览器忽略——left/right优先级更高，实际宽度由二者撑开。
- 想严格按父宽铺满：只设
left: 0; right: 0;，删掉width - 想留边距再铺满：用
left: 10px; right: 10px;，也不需要width - 若必须用
width（比如配合max-width），就别设冲突的left/right
flex或grid容器里absolute子元素的宽度行为
在display: flex或display: grid的父容器中，absolute子元素**完全不受flex/grid布局规则约束**，它的百分比宽度依然只看定位上下文，而不是flex item的分配空间。
立即学习“前端免费学习笔记（深入）”；
- 即使父容器是
flex，也要确保它有position: relative才能让width: 100%对齐该flex容器宽度 - 不要指望
align-self或justify-self影响absolute元素尺寸 - 若需动态适配flex item宽度，得用JS监听或CSS自定义属性配合
真正容易被忽略的是：很多开发者只加了width: 100%，却忘了检查父级有没有形成定位上下文——哪怕只差一层position: relative，结果就全错。
