CSS媒体查询下图片与文本重叠问题求助

我仔细看了你的问题，确实是position:absolute属性导致的重叠问题！当你给图片设置position:absolute后，它会脱离正常的文档流——简单说就是父容器.post不会被这张图片“撑开”高度，后面的.post__content文本就会直接往上跑，和图片重叠在一起。

下面给你两种可行的修复方案，推荐第一种，更符合正常布局逻辑：

方案一：取消小屏幕下的绝对定位（推荐） #

这种方法让图片回到文档流中，父容器会自动被图片撑开，文本自然就排在图片下方，不会重叠。

修改你的CSS代码：

/* 先给父容器添加相对定位，确保后续定位的参考基准正确 */
.post {
  position: relative;
  margin-bottom: 20px;
}

/* 媒体查询里调整图片和文本的样式 */
@media only screen and (max-width: 614px) {
  .post__image {
    position: static; /* 取消绝对定位，让图片回到文档流 */
    width: 100%; /* 让图片占满父容器宽度 */
    height: auto; /* 保持图片比例 */
  }
  
  .post__content {
    margin-top: 12px; /* 给图片和文本之间加一点间距，可选 */
    padding: 0 16px; /* 保持和大屏幕一致的内边距，可选 */
  }
}

方案二：保留绝对定位，给父容器设置最小高度 #

如果你一定要保留图片的position:absolute，那需要给父容器设置足够的最小高度，确保文本不会跑到图片区域里：

.post {
  position: relative;
  margin-bottom: 20px;
}

@media only screen and (max-width: 614px) {
  .post {
    min-height: 300px; /* 数值要大于等于你的图片高度，根据实际情况调整 */
  }
  
  .post__content {
    position: absolute;
    top: 310px; /* 比图片高度多10px，避免紧贴或重叠 */
    left: 0;
    right: 0;
    padding: 0 16px;
  }
}

方案一的优势在于不需要硬编码高度，后续图片尺寸变化时也不用修改CSS，维护起来更省心。

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