如何让overflow:hidden对绝对定位的孙元素生效？

核心修改点 #

• 给红色父容器（.red）添加position: relative，使其成为内部绝对定位元素的包含块
• 给.red设置明确的宽高（避免容器高度塌陷）

修改后的完整代码 #

HTML

<div class='red'>
  <div class='blue'>
    <div class='yellow'></div>
    <div class='yellow'></div>
  </div>
</div>

CSS

.red {
  overflow: hidden;
  position: relative; /* 关键：创建包含块，让overflow对内部绝对定位元素生效 */
  width: 300px; /* 按需调整尺寸 */
  height: 300px; /* 按需调整尺寸 */
  background: red;
}
.blue {
  position: absolute;
  width: 200px;
  height: 200px;
  background: blue;
}
.yellow {
  position: absolute;
  width: 150px;
  height: 150px;
  background: yellow;
  top: 120px; /* 故意让元素超出边界，测试裁剪效果 */
  left: 120px;
}

原理说明 #

• 当.blue设为绝对定位时，它会脱离.red的正常文档流，默认情况下.red的overflow: hidden仅能约束自身文档流内的元素，对脱离流的绝对定位元素无效。
• 给.red添加position: relative后，它会成为内部所有绝对定位元素的包含块，此时.red的overflow: hidden会裁剪所有超出该包含块边界的元素，包括.blue及其子元素.yellow。
• 设置宽高是因为脱离流的元素无法支撑父容器高度，.red如果没有明确尺寸会塌陷为0，无法起到裁剪作用。

内容的提问来源于stack exchange，提问作者Travis C