Fixed header overlaps-CodePudding

Im using codepenio to create a product landing page with free code camp and one of the requirements is for the header to stay in place when scrolling down. I put the position fixed but it overlaps the content I have under it.

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
header {
  width: 100%;
  display: block;
  
  position: fixed;
  background-color: red;
}
header img {
  width: 100px;
}

<!DOCTYPE html>
<html>
<body>
 <div >
  <header id="header">
    <div >
    <img id="header-img" src="https://live.staticflickr.com/7145/6840249697_21875cc5d6_b.jpg" alt="Two beechcraft bonanzas flying in formation">
    </div>
    <nav id="nav-bar">
      <a  href="#Beechcraft">Beechcraft</a>
      <a  href="#Cessna">Cessna</a>
      <a  href="#Piper">Piper</a>
    </nav>
  </header>
    <div >
      <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/ru0Jpi1Mlp8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div>
      <p id="Beechcraft">Beechcrafts for sale</p>
      <p id="Cessna">Cessnas for sale</p>
      <p id="Piper">Pipers for sale</p>
    </div>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input type="email" name="email" id="email" required placeholder="Enter your Email"></br>
      <input type="submit" name="submit" id="submit">
    </form> 
  </body>
  </div>
  
  
  
  
  
  
  
  
  
  
</html>

CodePudding user response：

You can try this approach then let me know.

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
header {
  width: 100%;
  display: block;
  top: 0;
  right: 0; 
  left: 0;  
  position: fixed;
  background-color: red;
}

header img {
  width: 100px;
}

.video {margin-top: 100px;}

<!DOCTYPE html>
<html>
<body>
 <div >
  <header id="header">
    <div >
    <img id="header-img" src="https://live.staticflickr.com/7145/6840249697_21875cc5d6_b.jpg" alt="Two beechcraft bonanzas flying in formation">
    </div>
    <nav id="nav-bar">
      <a  href="#Beechcraft">Beechcraft</a>
      <a  href="#Cessna">Cessna</a>
      <a  href="#Piper">Piper</a>
    </nav>
  </header>
    <div >
      <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/ru0Jpi1Mlp8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div>
      <p id="Beechcraft">Beechcrafts for sale</p>
      <p id="Cessna">Cessnas for sale</p>
      <p id="Piper">Pipers for sale</p>
    </div>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input type="email" name="email" id="email" required placeholder="Enter your Email"></br>
      <input type="submit" name="submit" id="submit">
    </form> 
  </body>
  </div>
  
  
  
  
  
  
  
  
  
  
</html>

CodePudding user response：

Set a height value for your header, and then add that value as a padding to .entire-page.

Like:

.entire-page {
    padding-top: 50px;
}