Div元素在CSS之后不顯示

Question

Web開發的新手，我正在創建一個新網站，當前使用html，js和css，但是在應用css之后缺少某些元素？ 兩個div元素box1和box2缺少所有內容。 我在chrome中打開了inspect選項，看到它們在代碼中但沒有加載？

<header>
  <img src="SAGE LOGO.png">

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </nav>
</header>
<main>
  <div class="box1">
    <label class="ld-label">
            Project Number:
          </label>
    <input class="ld-url-input" type="text" id="fetchURL" />
    <button type="button" id="add" class="design_button add">Draw</button>
  </div>
  <div class="box2">
    <form method="post" action="data.php">
      <label class="ld-label">
                  Add Project:
                </label>
      <input class="ld-url-input" type="text" name="textdata">
      <input type="submit" name="submit" value="Submit">
    </form>
  </div>
</main>

<div id="super">
  <div id="container">
  </div>
</div>

CSS：

header img {
  height: 80px;
}

body {
  height: 125vh;
  background-color: #222641;
  background-size: cover;
  font-family: sans-serif;
}

main {
  color: white;
}

header {
  background-color: #A80B16;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
}

.ld-label {
  width: 200px;
}

.ld-url-input {
  display: inline-block;
}

Answer 1

header與內容重疊。

任一拆卸position: fixed; 用於header或padding-top: 80px; 為您的main

 header img { height: 80px; } body { background-color: #222641; background-size: cover; font-family: sans-serif; } main { color: white; padding-top: 80px; } header { background-color: #A80B16; position: fixed; top: 0; left: 0; right: 0; height: 80px; } .ld-label { width: 200px; } .ld-url-input { display: inline-block; } 

 <header> <img src="SAGE LOGO.png"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Help</a></li> </ul> </nav> </header> <main> <div class="box1"> <label class="ld-label"> Project Number: </label> <input class="ld-url-input" type="text" id="fetchURL" /> <button type="button" id="add" class="design_button add">Draw</button> </div> <div class="box2"> <form method="post" action="data.php"> <label class="ld-label"> Add Project: </label> <input class="ld-url-input" type="text" name="textdata"> <input type="submit" name="submit" value="Submit"> </form> </div> </main> <div id="super"> <div id="container"> </div> </div> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="./script.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 

Answer 2

由於標頭box1和box2的固定位置在標頭后面移動，因為固定位置划分不會占用其空間，因此要解決此問題，請在主元素中的css下方放置。

 main{ margin-top: 82px; padding: 20px; }