如何解决HTML、CSS、JavaScript实现的响应式Navbar与页面主体内容重叠问题？

Hey there! Let's get that annoying overlap between your navbar and main content sorted out. After checking your code, here are the root causes and straightforward fixes:

Why the Overlap Happens #

• Your navbar isn't anchored to the top, so content can slide underneath or on top of it when using positioning or scrolling.
• There's no spacing added to the top of your main content to account for the navbar's 8vh height.
• You have duplicate global reset styles (*{margin:0;padding:0}) which can cause unexpected layout conflicts.
• Some elements like the iframe are incorrectly nested inside h1 tags, leading to messy layout flow.

Step-by-Step Fixes #

1. Make the Navbar Fixed to the Top

Update your nav CSS to keep it anchored at the top and ensure it stays above other content:

nav{
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #3c3c5c;
  font-family: 'Poppins', sans-serif;
  /* Add these lines */
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000; /* Ensures navbar stays above all other content */
}

2. Add Top Padding to Your Body

Give your main content space to avoid overlapping with the fixed navbar:

body{
  background-color: #2c7aaf;
  /* Add this line */
  padding-top: 8vh; /* Matches the navbar's min-height */
}

3. Clean Up Duplicate Global Styles

Remove one of the duplicate *{margin:0;padding:0;} blocks in your CSS to prevent conflicts. Keep just one at the very top:

*{ 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

4. Fix Invalid HTML Structure

Don't nest iframe inside h1 tags (it's semantically incorrect and can cause layout issues). Rewrite that section of your HTML:

<h1 class="last-Vid"> Watch last video here:</h1>
<iframe width="560" height="315" class="vid" src="https://www.youtube.com/embed/DfQBmMqm0Og" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

5. Adjust Absolute Positioned Elements (Like .landing)

If you're using the .landing class elsewhere, update its positioning to account for the fixed navbar:

.landing {
  width: 1336px;
  position: absolute;
  top: calc(40% + 8vh); /* Add the navbar height to the top position */
  left: 50%;
  transform: translate(-50%, -50%);
}

Why These Changes Work #

• position: fixed locks the navbar to the top of the viewport, so it doesn't move when scrolling.
• padding-top: 8vh pushes all main content down exactly the height of the navbar, eliminating overlap.
• z-index: 1000 ensures the navbar stays visible above other content, even if elements use absolute/relative positioning.
• Cleaning up HTML structure and duplicate styles makes your code more maintainable and avoids unexpected layout bugs.

Give these changes a try, and your navbar and main content should play nicely together!

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