CSS设置overflow:hidden后图片仍溢出div容器的问题排查

云上老周

2026-8-27

核心问题点

给图片设置了position: absolute，但父容器.righthalf没有创建定位上下文：绝对定位元素会向上查找最近的position值不为static的祖先元素作为定位基准，你现在的.righthalf是默认的static定位，图片实际是相对于视口/更外层有定位的祖先定位，完全脱离了右侧栏的布局范围，给右侧栏加overflow: hidden自然裁剪不到它。
外层容器.halfcontainer设置了flex-direction: column，这是垂直排列的弹性布局，根本不是你预期的左右两栏结构，当前左右两个div是上下堆叠的，不是左右分栏。
给.hero__image本身加overflow: hidden是无效属性：这个属性的作用是裁剪当前元素内部溢出的子内容，管不到元素自身溢出父容器的情况。

修复代码

调整后的CSS如下：

.halfcontainer {
  display: flex;
  /* 改为row实现左右分栏，删掉原来的column值 */
  flex-direction: row;
  height: 100vh;
  align-items: center;
  justify-content: center;
  margin: 20px;
}

.righthalf{
  overflow: hidden;
  max-width: 50vw;
  /* 新增相对定位，创建定位上下文，让内部绝对定位的图片以它为基准 */
  position: relative;
}

.hero__image {
  display: block;
  position: absolute;
  width: 70%;
  top: 10%;
  right: -30%;
  /* 移除图片上无效的overflow: hidden属性 */
}