HTML + CSS 表单在标题后面滚动但仍然可见

Question

我正在尝试理解一个小元素的 CSS + HTML。当然是学习，但我不确定我是否理解为什么会这样。

我希望我的页眉得到修复，所有内容都滚动到它后面。我已经成功地做到了这一点，但是一旦它在它后面滚动，我不希望它在滚动到标题时可见。这是一个演示问题的 fiddle 。

.container-head {
  background-color: #343a40; 
  color:#fff; position: fixed; 
  width:100%; 
  z-index: 1;
}

<div class="container-fluid">
    <div>
        <div class="container-head">
            <h4>Insert</h4>
        </div>

        <div class="container">
            <h5>New Entry</h5>
        </div>
        <div class="container">
            <form method="post">
                  <div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>


                      <small class="form-text text-muted">Required</small>

</div>
                  <div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>


                      <small class="form-text text-muted">Required</small>

                  </div>
                  <div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>


                      <small class="form-text text-muted">Required</small>

                  </div>
                  <div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>


                      <small class="form-text text-muted">Required</small>

                  </div>
                <button class="btn btn-success">Insert</button>
            </form>
            <br>
        </div>
    </div>
</div>

如有任何建议，我们将不胜感激。

Answer 1

稍微更新了一些样式和 HTML

.container-head {
  background-color: #343a40;
  color: #fff;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
}

body {
  margin: 0;
}

.body-container {
  margin-top: 60px;
}

.container-head {
  background-color: #343a40;
  color: #fff;
  position: fixed;
  width: 100%;
  top: 10px;
  z-index: 2;
  padding: 10px 0;
}

body {
  margin: 0;
}

<div class="container-fluid">

  <h4 class="container-head">Insert</h4>
  <div style="position: fixed; height:72px; width: 100%;background-color: white;top: 0;z-index:1;">
  </div>
  <div style="margin-top: 100px;position: relative;">
    <h5>New Entry</h5>
    <form method="post">
      <div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>


        <small class="form-text text-muted">Required</small>

      </div>
      <div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>


        <small class="form-text text-muted">Required</small>

      </div>
      <div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>


        <small class="form-text text-muted">Required</small>

      </div>
      <div class="form-group"><label for="id_desc">Description</label><textarea name="desc" cols="40" rows="10" class="form-control" placeholder="Description" title="Required" required="" id="id_desc"></textarea>


        <small class="form-text text-muted">Required</small>

      </div>
      <button class="btn btn-success">Insert</button>
    </form>
    <br>
  </div>
</div>