Hero Banner布局问题：内容与Footer需移至图片下方

你的核心问题有两个：一是HTML结构错误，把content和footer放在了absolute定位的hero-image容器里，导致它们被覆盖在图上；二是hero-image用absolute脱离了文档流，页面无法撑开滚动。下面是具体修复步骤：

1. 修正HTML结构 #

把.content和.footer从.hero-image里移出来，放在它的外面，这样它们才会排在Hero图的下方：

<div class="navbar">
  <a href="index.htm">Home</a>
  <a href="signup.htm">Sign up</a>
  <a href="about.htm">About us!</a>
  <div class="dropdown">
    <button class="dropbtn">Our teams ▼
            </button>
    <div class="dropdown-content">
      <a href="LOL.htm">League of legends</a>
      <a href="valorant.htm">Valorant</a>
      <a href="RL.htm">Rocket league</a>
    </div>
  </div>
</div>
<!-- Hero图容器 -->
<div class="hero-image">
  <div class="hero-text">
    <img src="RCLOGO.png" alt="RCLOGO">
    <h2>E sports team</h2>
    <p>check out the navigation links above to learn about us!</p>
    <p>OR:</p>
    <a class="button" href="signup.htm">Join now</a>
  </div>
</div>
<!-- 内容和页脚移到外面 -->
<div class="content">
  <p>CONTENT</p>
</div>
<div class="footer">
  <p>FOOTER</p>
</div>

2. 修改CSS定位与样式 #

关键改动： #

• 把.hero-image的position:absolute改成position:relative，用min-height:100vh代替height:100%，确保它占满当前视口高度，同时不脱离文档流，后面的元素能正常排列。
• 用Flex布局优化.hero-text的居中，比margin更稳定。
• 修复.content和.footer重复的border样式冲突。

修改后的完整CSS：

body,
html {
  /* 去掉固定height，用min-height更灵活 */
  min-height: 100%;
  width: 100%;
  font-size: 100%;
  background-color: #333;
  /* 去掉默认边距，避免页面出现空白 */
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 5em;
}

h2 {
  font-size: 2.5em;
}

.content {
  font-family: sans-serif;
  margin: 10%;
  font-size: 170%;
  /* 合并border样式，避免冲突 */
  border: 2px solid white;
  color: white;
  /* text-align没有bottom值，改成left */
  text-align: left;
  padding: 1.5%;
  line-height: 100%;
  position: static;
  background-color: pink;
}

.footer {
  font-family: sans-serif;
  margin: 10%;
  font-size: 170%;
  border: 2px solid white;
  color: white;
  text-align: left;
  padding: 1.5%;
  line-height: 100%;
  position: static;
  background-color: purple;
}

/* The hero image */
.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("blackred.webp");
  /* 用min-height:100vh确保占满视口，relative定位不脱离文档流 */
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  position: relative;
  /* 用flex让内部的hero-text居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Place text in the middle of the image */
.hero-text {
  font-family: 'Arial';
  color: white;
  text-align: center;
  font-size: 150%;
  /* 给文字加内边距，避免贴边 */
  padding: 0 20px;
}

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
  /* 固定导航栏在顶部，滚动时不消失（可选，按需保留） */
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: white;
  color: black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.button {
  background-color: black;
  border: 2px solid white;
  color: white;
  padding: 10px 30px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
}

.button:hover {
  background-color: white;
  color: black;
}

/* 其他Hero图样式同样修改position和height */
.hero-image-valorant {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("valorant3.jpg");
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image-LOL {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("LOL1.jfif");
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image-RL {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("RL1.webp");
  min-height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

改动说明： #

• 结构调整：把content和footer移出hero容器，确保它们在文档流中排在Hero图下方。
• 定位修改：用relative+min-height:100vh替代absolute，既保证Hero图全屏，又不破坏页面的正常流布局。
• 居中优化：用Flex布局实现hero-text的完美居中，比margin更适配不同屏幕。
• 样式修复：解决了content和footer的border样式冲突，移除了无效的text-align:bottom属性。

现在打开页面，Hero图会全屏显示，滚动页面就能看到下方的content和footer了。

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