父容器必须设 position: relative 才能成为 absolute 子元素的定位基准和 overflow: hidden 的裁剪上下文，否则子元素将相对于视口定位并溢出；同时需配合尺寸适配（如 width: 100%）和明确偏移（如 left: 0）防止撑出边界。
只加 position: relative 不够，必须同步控制子元素的定位基准和尺寸逻辑，否则照样溢出。
为什么父容器不设 position: relative 就会溢出
浏览器对 position: absolute 元素的定位参考，是「最近的已定位祖先」——即 position 值为 relative、absolute、fixed 或 sticky 的祖先元素。如果父容器没设这些值，它就继续往上找，最终落到 或视口上。这时子元素的 top/left 是相对于整个页面计算的，跟父容器尺寸毫无关系。
常见错误现象：
- 父容器宽 200px，子元素设了
width: 250px+position: absolute，结果整个块飘到右边去 - 父容器有
padding: 20px，但子元素top: 0; left: 0紧贴父容器边框内侧，视觉上像“顶破”了 padding - 用
transform: translateY(-50%)居中，却发现overflow: hidden完全不裁剪它
必须同时设置 position: relative 和 overflow: hidden
overflow: hidden 单独加在父容器上，对 position: absolute 子元素无效——它只裁剪「属于该容器包含块（containing block）且受其层叠上下文约束」的内容。而这个前提，就是父容器本身得是那个「包含块」，也就是得先有 position: relative。
所以正确写法是：
.parent {
position: relative;
overflow: hidden;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
容易踩的坑：
- 把
overflow: hidden加在祖父级或兄弟容器上——没用，不是直接父级就不管事 - 父容器用了
float或display: inline-block，却忘了position: relative仍需显式声明 - 子元素用了
transform（比如旋转或位移），此时它会创建新的层叠上下文，导致父级overflow: hidden失效
子元素尺寸和偏移必须适配父容器
加了 position: relative 只是建立了坐标系，不代表子元素自动“听话”。它默认仍按自身尺寸渲染，可能撑出边界。
实操建议：
- 避免固定像素宽高：把
width: 250px改成width: 100%或max-width: 100% - 明确起始边：用
left: 0或right: 0替代默认的无偏移状态，防止意外漂移 - 需要内边距对齐时，别靠
margin：改用inset: 20px（等价于top: 20px; right: 20px; bottom: 20px; left: 20px），语义更清晰 - 文字类内容溢出，补上
word-break: break-word和overflow-wrap: break-word，防长单词撑破
嵌套场景下要分层解耦定位与溢出
当父容器本身已有 overflow: auto（比如一个可滚动卡片区域），又想让内部某个绝对定位子元素展开时不触发滚动条，就不能直接给它加 position: relative——这会让展开内容参与父容器的溢出计算。
正确做法是插入一层中间容器：
<div class="scrollable-parent">
<div class="position-context">
<div class="dropdown"></div>
</div>
</div>
然后：
-
.scrollable-parent保留overflow: auto，不设position -
.position-context设position: relative，作为.dropdown的定位上下文 -
.dropdown用bottom: 0; left: 0; width: 100%锚定在中间容器底部，展开方向可控
这种结构把「定位控制」和「溢出行为」拆开，比硬塞一个 overflow: hidden 更健壮，也更容易调试。
最常被忽略的一点：哪怕你写了 position: relative，如果父容器高度由内容撑开、又没设 min-height 或 height，子元素的 bottom: 0 可能根本找不到“底”在哪——这时候得先稳住父容器的盒模型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
