修复了 header 重叠

Question

我正在使用 codepenio 创建一个包含免费代码训练营的产品登陆页面，其中一项要求是 header 在向下滚动时保持在原位。我把位置固定了，但是它和我下面的内容重叠了。

* {
  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 class="entire-page">
  <header id="header">
    <div class="header-picture">
    <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 class="nav-link" href="#Beechcraft">Beechcraft</a>
      <a class="nav-link" href="#Cessna">Cessna</a>
      <a class="nav-link" href="#Piper">Piper</a>
    </nav>
  </header>
    <div class="video">
      <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>

Answer 1

设置页眉的高度值，然后将该值作为填充添加到 .entire-page。

喜欢：

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

Answer 2

你可以试试这个方法然后告诉我。

* {
  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 class="entire-page">
  <header id="header">
    <div class="header-picture">
    <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 class="nav-link" href="#Beechcraft">Beechcraft</a>
      <a class="nav-link" href="#Cessna">Cessna</a>
      <a class="nav-link" href="#Piper">Piper</a>
    </nav>
  </header>
    <div class="video">
      <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>

修复了 header 重叠

Fixed header overlaps

html

css

header

fixed