overflow:hidden对图片无效问题求助（附布局代码与需求）

嘿，我来帮你搞定这个头疼的问题！你设置了overflow: hidden却没效果，还有双div并排（小屏幕堆叠）且左侧在右侧上方的需求，咱们一步步拆解解决：

一、为什么overflow:hidden没效果？ #

问题出在你那张绝对定位的图片上！.img1用了position: absolute，它会脱离当前文档流，而你没给父容器（.sec/.sec2）设置position: relative，导致绝对定位元素的包含块不是父容器，而是更上层的元素（甚至是body），所以父容器的overflow: hidden根本管不到它。

解决办法很简单：给.sec和.sec2都加上position: relative，让它们成为绝对定位图片的“容器”，这样overflow: hidden就能正常截断超出父容器的图片部分了。

二、实现双div并排+小屏幕堆叠+左侧在上的布局 #

这里用Flexbox来做最方便，响应式适配也简单，我给你写一套完整的可运行代码：

HTML结构（补全你可能缺失的容器层） #

<div class="layout-container">
  <div class="sec">
    <img src="你的图片路径" alt="左侧图片" class="img1">
  </div>
  <div class="sec2">
    <!-- 这里放右侧div的内容 -->
  </div>
</div>

CSS代码（包含所有需求） #

/* 外层容器用Flex实现并排，自动换行适配小屏幕 */
.layout-container {
  display: flex;
  flex-wrap: wrap;
  position: relative; /* 确保内部层级正常 */
}

/* 左侧div样式 */
.sec {
  background-color: red;
  min-height: 100vh;
  overflow: hidden;
  position: relative; /* 关键：约束绝对定位的图片 */
  flex: 0 0 50%; /* 并排时占50%宽度 */
  max-width: 50%;
  z-index: 1; /* 让左侧div层级高于右侧，实现“置于上方” */
  /* 如果需要左侧部分覆盖右侧，可以加个负margin，比如：margin-right: -30px; */
}

/* 右侧div样式 */
.sec2 {
  background-color: blue;
  min-height: 100vh;
  overflow: hidden;
  position: relative; /* 同样给右侧加上，防止未来有绝对定位元素时出问题 */
  flex: 0 0 50%; /* 并排时占50%宽度 */
  max-width: 50%;
}

/* 绝对定位的图片样式 */
.img1 {
  max-width: 100%;
  position: absolute;
  top: 0; /* 可以根据需求调整图片位置 */
  left: 0;
}

/* 小屏幕下自动堆叠，各占100%宽度 */
@media (max-width: 768px) {
  .sec, .sec2 {
    flex: 0 0 100%;
    max-width: 100%;
    /* 堆叠时如果不需要左侧覆盖，z-index可以改成auto，保持正常顺序 */
    z-index: auto;
  }
}

三、关键知识点总结 #

• 绝对定位元素必须有一个非static定位的父元素作为包含块，overflow: hidden才能对它生效。
• Flexbox的flex-wrap: wrap是实现响应式堆叠的核心，配合媒体查询可以精准控制不同屏幕下的布局。
• z-index属性控制元素的层级，数值高的元素会显示在数值低的元素上方（前提是元素都有定位属性）。

如果还有细节需要调整（比如图片位置、覆盖程度），可以根据需求修改对应的CSS属性哦～

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