绝对定位元素设width: 100%未撑满父容器，因其宽度参考最近已定位祖先（非static），若无则参考视口；需父级设position: relative等才能使100%相对父容器计算。
因为 width: 100% 在 position: absolute 下不是相对于“视觉父容器”，而是相对于“最近的已定位祖先”；如果父容器没设 position: relative，它就默认参考视口，自然超出。
父容器没设 position: relative，width: 100% 就失效
绝对定位元素的 width: 100% 只有在它有明确包含块（containing block）时才有效。这个包含块必须是最近的、position 值为 relative、absolute、fixed 或 sticky 的祖先元素。如果父容器仍是默认的 position: static，浏览器会跳过它，继续往上找——最常见结果就是回退到视口（viewport），此时 width: 100% 表示“占满整个屏幕宽度”，而不是你看到的那个父容器。
用开发者工具检查：选中该子元素 → 切到「Computed」面板 → 找 width 的计算值和右侧的 reference box。如果显示的是 initial containing block 或 viewport，就坐实了这个问题。
- 不要只看 HTML 结构“像不像父级”，CSS 定位不认视觉层级，只认
position值 -
position: relative本身不改变布局，可以放心加，它是成本最低的修复方式 - Tailwind 用户注意：
class="relative overflow-hidden"必须同时存在，顺序无关，但缺一不可
left: 0; right: 0; 比 width: 100% 更可靠
即使父容器已设 position: relative，width: 100% 仍可能因父容器自身宽度不可计算（比如由内容撑开、float 未清除、flex item 无约束）而失效。而 left: 0; right: 0; 是一种更鲁棒的拉伸方式：它强制元素填满左右偏移之间的可用空间，且不依赖父容器是否有显式 width。
- 它天然兼容
box-sizing: border-box，不会因padding多算一次而溢出 - 若父容器有
padding，子元素会顶到 content box 边缘——这是预期行为；如需对齐内边距，改用inset: 0（现代浏览器支持）或手动减去padding - IE8 及更早不支持
left + right触发拉伸，如需兼容，得降级为width: 100%+ 显式父宽
伪元素、替换元素、flex 子项会悄悄破坏宽度控制
就算 position: relative 和 left: 0; right: 0; 都写了，以下三类元素仍可能让布局“看起来”溢出：
-
img、svg、iframe等替换元素：默认按原始尺寸渲染，必须额外加max-width: 100%+height: auto -
input、button、textarea：即使box-sizing: border-box已设，它们在 flex 容器中默认带min-width: auto，得补min-width: 0 - 伪元素（
::before/::after）：如果父容器全局重置了box-sizing，但漏掉了伪元素，它们仍按content-box计算，padding 一加就撑破
排查时别只盯着子元素本身，打开开发者工具，挨个检查这些“安静”的节点是否在暗处撑开了边界。
overflow: hidden 不生效？先确认它作用在谁身上
overflow: hidden 对 position: absolute 子元素裁剪生效的前提，是它和 position: relative 写在同一选择器里，且作用于那个“定位上下文创建者”。把它加在祖父级、兄弟容器，甚至用 Tailwind 写成 class="overflow-hidden relative" 却挂在错误元素上，都等于白写。
- 裁剪只发生在“包含块”范围内，不是“视觉父容器”范围内
- 如果父容器高度塌陷（比如内部全是
absolute元素），overflow: hidden仍在，但容器高为 0，裁了个空盒子——此时要给父容器加min-height或换用display: flex自动撑高 - 加了
transform（如scale、translateZ）的父容器，可能触发新层叠上下文，导致裁剪失效，尤其在 Safari 中
真正容易被忽略的，是以为“代码里写了 overflow: hidden 就一定起作用”，却没验证它是否真的落在那个被浏览器认定为 containing block 的元素上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
