绝对定位元素width默认为shrink-to-fit而非继承父宽；需父容器设position:relative并子元素设left:0;right:0;或width:100%且父有明确宽度才能实现“继承”效果。
因为绝对定位元素脱离文档流后，width 默认行为变成 shrink-to-fit（内容收缩），不是继承父宽，也不是自动占满父容器。
absolute 元素的 width 计算规则变了
普通块级元素默认 width: auto 表示“填满可用宽度”，但 position: absolute 一加，width: auto 就退化为“包裹内容最小宽度”——哪怕父容器有 width: 300px，它也视而不见。
- 只设
left: 20px不设right或width，浏览器无法推导终点，宽度直接坍缩到内容宽度（一个空div可能是 0×0） -
max-width不是“让宽度自适应”的开关，它只是上限；没显式约束左右边界，它压根不触发拉伸逻辑 - 即使父元素有
width: 100%，子元素也不会继承这个值——width是不可继承属性（见 CSS 继承规则）
想让它“看起来像继承了父宽”，得手动指定参考系
所谓“继承父宽”，本质是让它相对于父容器的 content box 拉伸。这需要两个前提：父容器是定位上下文 + 子元素用 left/right 或 width 显式绑定。
- 父容器必须有
position: relative（或absolute/fixed/sticky），否则子元素定位参考的是更上层祖先，宽高计算基准就错了 - 推荐写法：
left: 0; right: 0;→ 宽度 = 父容器 content width（注意：不含 padding） - 如果要含 padding，改用：
width: 100%; box-sizing: border-box;，但前提是父容器本身有明确 width（比如不是 height: 0 的塌陷容器）
常见误判场景：父容器本身就没宽度
很多情况下你以为“父容器明明写了 width”，但它实际渲染宽度是 0 —— 这时无论你怎么设子元素的 left/right，算出来的宽度都是 0。
- 父容器内部全是
position: absolute子项，没有流内元素撑高宽 → 高度/宽度塌陷 - 父容器是 flex/grid 容器但没设
width，且子项又全 absolute → 它的 width 仍是 auto，可能收缩为 0 - 用开发者工具检查父容器的 Layout 面板，看
width和height是否真为预期值；临时加outline: 1px solid red看是否“有框”
真正麻烦的不是怎么写 CSS，而是你得同时确认三层东西：父容器有没有定位上下文、有没有真实尺寸、子元素有没有对齐约束——漏掉任何一层，width 就会“莫名其妙”不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
