absolute元素的width: 100%参考最近已定位祖先（如relative/absolute/fixed/sticky），若无则退至视口；父元素未设position: relative是常见错误，导致参考系错位为html或body，修复只需加position: relative。
absolute元素的width: 100%到底参考谁？
它不参考父元素（parent），而参考**最近的已定位祖先元素**（containing block）——即 position 值为 relative、absolute、fixed 或 sticky 的祖先。如果找不到，就退回到初始包含块（通常是视口）。所以即使你写了 .parent { width: 300px; }，只要它没设 position: relative，子元素的 width: 100% 就可能算成视口宽度（比如 1920px），而不是 300px。
父元素没加position: relative是最大常见错误
这个缺失直接导致定位上下文断裂：
- 浏览器开发者工具里看该元素的
offsetParent，大概率显示为body或html，而非你预期的父容器 -
computed styles中的width值会是视口宽度或 0（尤其当父容器宽为auto且无内容撑开时） - 临时加
outline: 2px solid red到父元素上，你会发现子元素根本不在它的视觉边界内 - 修复只需一行：
.parent { position: relative; }—— 通常无视觉副作用，但能确立坐标系
就算有position: relative，width: 100%也不总可靠
因为 width: 100% 计算的是包含块的 **border box 宽度**，但它对 padding/border 不敏感；而实际布局中，偏差常来自盒模型和父容器尺寸不确定性：
- 如果父容器宽是
auto（比如仅靠文字撑开），width: 100%可能计算为 0（尤其在 IE8 或某些 flex 场景下） - 父容器若用了
overflow: hidden、filter: blur(1px)或transform: translateZ(0)，会隐式创建新 containing block，子元素实际参考的就不是你写的那个relative父级了 - 更稳的替代写法是：
left: 0; right: 0;—— 它强制拉伸到包含块左右边缘，不受父容器是否带padding影响，且会忽略width声明
为什么left: 0; right: 0;比width: 100%更适合铺满
这不是语法糖，而是行为差异：
-
left: 0; right: 0;明确声明左右边界位置，浏览器据此反推宽度 = 包含块宽 − left − right - 它天然兼容留白控制：比如
left: 20px; right: 20px;就等效于“内部留 20px 边距”，不用算calc(100% - 40px) - 当父容器设了
overflow: hidden，它裁剪的是这个拉伸后的结果，逻辑清晰 - 注意：同时设
left和right时，width属性会被浏览器忽略，别再混用
真正卡住人的地方，往往不是忘了加 position: relative，而是加了之后发现父容器自己宽高还是 auto，或者被某个隐式 containing block 悄悄劫持了参考系——这时候得一层层查 offsetParent 和 computed styles 里的 containing block 来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
