通过在父容器内嵌套一个相对定位的容器层，将子元素的绝对定位和尺寸变化限制在此层内，从而避免触发父容器的滚动或布局重排。
通过在父容器内嵌套一个相对定位的容器层，将子元素的绝对定位和尺寸变化限制在此层内，从而避免触发父容器的滚动或布局重排。
在 CSS 布局中，当子元素使用 position: absolute 并大幅扩展（如高度从 50px 增至 1000px）时，若其最近的定位上下文（containing block）是父元素本身（例如父元素设置了 position: relative），该绝对定位元素仍会参与父容器的溢出计算逻辑——尤其当父元素设置了 overflow: auto 时，极易意外触发滚动条或内容截断。
直接移除父元素的 position: relative 并不可靠：它可能破坏原有布局依赖（如其他绝对定位子项、伪元素定位等），尤其在多层嵌套结构中易引发连锁偏移。
✅ 正确解法是隔离定位上下文：
引入一个中间容器 .container，显式设置 position: relative，使其成为 .child 的新定位上下文。这样，.child 的 position: absolute 将以 .container 为基准定位，其尺寸变化不再影响外层 .parent-1 的溢出判定——因为 .container 自身尺寸固定（100% × 100%），且未设置 overflow，而 .parent-1 仅负责渲染这个“静态尺寸”的容器。
.parent-1 {
width: 200px;
height: 200px;
background-color: red;
overflow: auto; /* 仅对 .container 的盒模型生效 */
box-sizing: border-box;
}
.container {
position: relative; /* 创建新的 containing block */
width: 100%;
height: 100%; /* 严格约束尺寸，不随子元素膨胀 */
}
.child {
width: 50px;
height: 50px;
background-color: yellow;
transition: height 0.3s ease, position 0.3s ease;
}
.container:hover .child {
position: absolute;
height: 1000px;
bottom: 0; /* 可选：锚定到底部，避免向上撑开 */
left: 0;
width: 50px; /* 显式重设宽高，防止继承异常 */
}<div class="parent-1">
<div class="container">
<div class="child"></div>
</div>
</div>⚠️ 注意事项：
- 绝对定位后，.child 脱离文档流，若需保持视觉对齐（如居中），应配合 top/left/transform 等精确控制；
- 务必为 .child 添加 transition，否则高度突变会显得生硬；
- 若 .container 内有多个需展开的子元素，建议为每个添加唯一类名或使用 :is() 选择器精细化控制；
- 避免在 .parent-1 上同时设置 overflow: hidden 和期望子元素“溢出可见”，二者逻辑冲突——此时应改用 clip-path 或 transform: scale() 等非布局型展开方案。
此模式兼顾可维护性与兼容性，适用于 React/Vue 组件封装、CSS-in-JS 场景及复杂嵌套布局，是解决“局部展开不扰全局”的标准实践。
