如何实现带CSS轮播的Hero区并维持页面正常流？

我来帮你搞定这个轮播Hero区的布局问题，核心矛盾是绝对定位脱离文档流导致的内容重叠，以及容器高度的控制问题。下面是调整后的代码和思路：

问题分析 #

• 原来的.pic-wrapper用position:absolute会让它彻底脱离文档流，后面的<section>自然会跑到它下方发生重叠；
• 移除position:absolute后，因为内部的figure都是绝对定位（不会撑开容器高度），你说它占满整个body大概率是继承了全局样式的问题，但我们可以通过把容器设为relative来完美解决。

修复步骤 #

1. 把.pic-wrapper的position:absolute改为position:relative，这样它会留在文档流中，后续内容会乖乖排在它下方；
2. 给标题<h1>添加绝对定位和居中样式，让它悬浮在轮播图上方，同时设置更高的z-index确保显示在最上层；
3. 给轮播图的figure设置更低的z-index，避免遮挡标题；
4. 顺手修复了原CSS里的笔误（Firefox动画延迟的连字符错误）。

修改后的代码 #

HTML（保持原结构无需改动） #

<section class="pic-wrapper">
 <h1>Slideshow Heading, should be on top of slideshow</h1>
 <figure class="pic-1" style="background-image: url(https://images.pexels.com/photos/258109/pexels-photo-258109.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
 <figure class="pic-2" style="background-image: url(https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
 <figure class="pic-3" style="background-image: url(https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
 <figure class="pic-4" style="background-image: url(https://images.pexels.com/photos/1166209/pexels-photo-1166209.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)"></figure>
</section>
<section>
 <h2>New Section, this currently ends up under the slideshow</h2>
</section>

CSS（关键修改已标注） #

/* 修改：把absolute改为relative，让容器留在文档流中 */
.pic-wrapper { 
  position: relative; 
  width: 100%; 
  min-height: 50vh; 
  overflow: hidden; /* 建议加上，防止轮播图缩放后溢出容器 */
}

/* 新增：让标题居中悬浮在轮播图上方 */
.pic-wrapper h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* 确保标题层级高于轮播图 */
  color: white; /* 可选：白色文字在图片上更清晰 */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 可选：加阴影提升可读性 */
  margin: 0; /* 去掉默认margin避免偏移 */
}

figure { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 0; 
  z-index: 1; /* 层级低于标题 */
  /* 动画样式 */
  animation: slideShow 24s linear infinite 0s; 
  -o-animation: slideShow 24s linear infinite 0s; 
  -moz-animation: slideShow 24s linear infinite 0s; 
  -webkit-animation: slideShow 24s linear infinite 0s; 
}

.pic-1 { 
  opacity: 1; 
  background-size: cover; 
  background-position-y: 50%; 
}

.pic-2 { 
  animation-delay: 6s; 
  -o-animation-delay: 6s; 
  -moz-animation-delay: 6s; /* 修复原代码笔误：多了一个连字符 */
  -webkit-animation-delay: 6s; 
  background-size: cover; 
  background-position-y: 50%; 
}

.pic-3 { 
  animation-delay: 12s; 
  -o-animation-delay: 12s; 
  -moz-animation-delay: 12s; /* 修复笔误 */
  -webkit-animation-delay: 12s; 
  background-size: cover; 
  background-position-y: 50%; 
}

.pic-4 { 
  animation-delay: 18s; 
  -o-animation-delay: 18s; 
  -moz-animation-delay: 18s; /* 修复笔误 */
  -webkit-animation-delay: 18s; 
  background-size: cover; 
  background-position-y: 50%; 
}

/* 关键帧动画 */
@keyframes slideShow { 
  0% { opacity: 0; transform:scale(1); } 
  5% { opacity: 1 } 
  25% { opacity: 1; } 
  30% { opacity: 0; transform:scale(1.1); } 
  100% { opacity: 0; transform:scale(1); } 
}

@-o-keyframes slideShow { 
  0% { opacity: 0; -o-transform:scale(1); } 
  5% { opacity: 1 } 
  25% { opacity: 1; } 
  30% { opacity: 0; -o-transform:scale(1.1); } 
  100% { opacity: 0; -o-transform:scale(1); } 
}

@-moz-keyframes slideShow { 
  0% { opacity: 0; -moz-transform:scale(1); } 
  5% { opacity: 1 } 
  25% { opacity: 1; } 
  30% { opacity: 0; -moz-transform:scale(1.1); } 
  100% { opacity: 0; -moz-transform:scale(1); } 
}

@-webkit-keyframes slideShow { 
  0% { opacity: 0; -webkit-transform:scale(1); } 
  5% { opacity: 1 } 
  25% { opacity: 1; } 
  30% { opacity: 0; -webkit-transform:scale(1.1); } 
  100% { opacity: 0; -webkit-transform:scale(1); } 
}

额外说明 #

• 修复了原CSS中-moz--animation-delay的笔误，确保Firefox浏览器下动画延迟正常生效；
• 标题的文字颜色和阴影是可选优化，你可以根据轮播图的色调调整；
• 添加overflow:hidden可以避免轮播图缩放时超出容器范围，保持页面整洁。

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