移动端如何将文本覆盖层移至图片内容下方？

预期效果 #

问题描述 #

当前实现中，屏幕宽度小于600px时，文本无法正常移动到图片下方，布局混乱。

当前代码 #

HTML #

<body>
  <div class="container">
    <div class="image-section">
      <img id="mainImage" src="image1.jpg" alt="Main Image">
    </div>
    <div class="text-section">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel justo vitae justo condimentum laoreet.</p>
    </div>
    <div class="controller">
      <button onclick="changeImage(1)">1</button>
      <button onclick="changeImage(2)">2</button>
      <button onclick="changeImage(3)">3</button>
    </div>
  </div>
</body>

CSS #

body,html {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}
.image-section {
  flex: 1;
  overflow: hidden;
  position: relative;
}
#mainImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.text-section {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.7);
}
@media only screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .text-section {
    order: 1;
    position: static;
    background-color: transparent;
  }
}

JavaScript #

const images = ['https://picsum.photos/id/237/200/300', 'https://picsum.photos/seed/picsum/200/300', 'https://picsum.photos/200/300?grayscale'];
let currentImageIndex = 0;

function changeImage(index) {
  currentImageIndex = index - 1;
  updateImage();
}

function updateImage() {
  const mainImage = document.getElementById('mainImage');
  mainImage.src = images[currentImageIndex];
}

// 自动轮播，每5秒切换一次
setInterval(() => {
  currentImageIndex = (currentImageIndex + 1) % images.length;
  updateImage();
}, 5000);

// 初始化加载第一张图
updateImage();

修复方案 #

问题根源：.text-section同时设置了flex:1和position:absolute，脱离了flex布局的文档流，导致移动端修改flex-direction:column时，文本无法正常参与布局排列。

修改后的CSS代码：

body,html {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  position: relative;
  min-height: 100vh;
}
.image-section {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100vh;
}
#mainImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.text-section {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  max-width: 300px;
  box-sizing: border-box;
}
.controller {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

@media only screen and (max-width: 600px) {
  .container {
    flex-direction: column;
    position: static;
  }
  .image-section {
    height: auto;
    width: 100%;
  }
  #mainImage {
    height: auto;
  }
  .text-section {
    position: static;
    max-width: 100%;
    background-color: transparent;
    padding: 20px;
    order: 2;
  }
  .controller {
    position: static;
    order: 1;
    padding: 10px 20px;
    text-align: center;
  }
}

修改说明 #

1. 桌面端：移除.text-section的flex:1，让它基于绝对定位覆盖在图片右上角；给.container加相对定位，让控制器居中定位在图片底部。
2. 移动端：
   • 取消.container的相对定位，让子元素回到正常文档流
   • 让.image-section高度自适应，避免图片拉伸变形
   • 将.text-section设置为position:static，回到flex布局流中，通过order:2让它排在图片之后
   • 调整控制器位置，让它显示在图片和文本之间，保证布局整洁

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