Slideshow覆盖Banner位置异常及代码优化求助（HTML/CSS/JS）

一、轮播图覆盖Banner的修复 #

轮播图跑到Banner上方的核心原因：轮播图图片用了position: absolute，但父容器#slideshow-container没设置position: relative，导致图片相对于整个页面定位，top: 0直接贴到页面顶部，自然覆盖了Banner。

修复只需两步：

• 给#slideshow-container加上position: relative，让内部绝对定位的图片以容器为基准
• 保留图片的position: absolute、top: 0、left: 0，确保图片在容器内重叠，同时容器会留在文档流中Banner的下方

二、代码精简优化建议 #

CSS部分 #

1. 把CSS里的HTML注释<!--slideshow-->换成CSS标准注释/* slideshow */，避免语法错误
2. 合并重复属性：比如.nav-list a里的两个transition可以合并成一行，减少冗余
3. 删掉媒体查询里的!important，媒体查询本身优先级更高，不需要强制覆盖
4. 去掉没必要的样式：比如.nav-list li的margin-bottom: 0px，默认就是0，不用写

JS部分 #

1. 用let/const替代var，变量作用域更清晰，避免全局污染
2. 提前缓存DOM元素（比如.bar），不用每次触发函数都重新查询，提升性能
3. 用箭头函数简化回调，代码更简洁

HTML部分 #

1. 给第一张轮播图直接加上active类，避免页面加载瞬间无图显示
2. 删掉代码块里多余的```标记，保证语法正确

修改后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Deine Webseite</title>
  <link rel="stylesheet" href="styles/style.css">
</head>

<body>
  <!-- Banner -->
  <img id="banner" src="images/gesundeSchuhe.jpg" alt="Banner">

  <!-- Navbar -->
  <div class="navbar">
    <div class="menu-toggle" onclick="toggleMenu()">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <ul class="nav-list">
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <!-- Slideshow -->
  <div id="slideshow-container">
    <!-- Füge hier deine Slideshow-Bilder ein -->
    <img src="images/test1.jpeg" alt="Slide 1" class="active">
    <img src="images/test2.jpeg" alt="Slide 2">
    <img src="images/test3.jpeg" alt="Slide 3">
  </div>

  <script src="script.js"></script>
</body>

</html>

CSS

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: larger;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#banner {
  width: 100%;
  display: block;
  max-height: 420px;
  background-color: #cc234c;
  object-fit: cover;
}

.navbar {
  background-color: rgba(248, 245, 245, 0.7);
  padding: 10px;
  align-items: center;
  position: absolute;
  z-index: 2;
  width: 100%;
  letter-spacing: 5px;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 5px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 2s ease;
  max-height: 0;
  overflow: hidden;
}

.nav-list.active {
  max-height: 150px;
}

.nav-list a {
  text-decoration: none;
  color: #cc234c;
  display: block;
  text-transform: uppercase;
  transition: color 0.3s ease, text-decoration 5s ease;
  padding-left: 50px;
  margin-right: 40px;
}

.nav-list a:hover {
  text-decoration: overline underline;
}

.menu-toggle {
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #cc234c;
  margin: 5px 0;
  transition: transform 0.5s ease;
}

.bar.change:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.bar.change:nth-child(2) {
  opacity: 0;
}

.bar.change:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

@media screen and (min-width: 769px) {
  .nav-list {
    flex-direction: row;
    max-height: none;
  }
  .nav-list li {
    margin-right: 20px;
  }
  .menu-toggle {
    display: none;
  }
}

.current {
  text-decoration: underline;
  color: #cc234c;
}

/* slideshow */
#slideshow-container {
  position: relative;
  text-align: center;
  margin: auto;
  overflow: hidden;
  border: 2px solid #000;
  padding: 0;
  height: 500px; /* 与图片高度一致，保证容器高度稳定 */
}

#slideshow-container img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 1s ease-in-out;
  opacity: 0;
}

#slideshow-container img.active {
  opacity: 1;
}

JavaScript

let currentSlide = 0;
const slides = document.querySelectorAll('#slideshow-container img');
const bars = document.querySelectorAll('.bar'); // 提前缓存DOM元素，避免重复查询

const showSlide = (index) => {
  slides.forEach(slide => slide.classList.remove('active'));
  slides[index].classList.add('active');
};

const nextSlide = () => {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
};

setInterval(nextSlide, 3000);
showSlide(currentSlide);

const toggleMenu = () => {
  document.querySelector('.nav-list').classList.toggle('active');
  bars.forEach(bar => bar.classList.toggle('change'));
};

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