固定的div正在获得保证金

Question

当我将div提供给它下方的margin-top时，已修复div ...为什么？

* {
  margin: 0;
  padding: 0;
}
.header_bg {
  width: 100%;
  height: 100px;
  position: fixed;
  background: black
}
.container {
  width: 960px;
  height: auto;
  margin: 0 auto
}
ul.menu {
  list-style: none;
}
ul.menu li {
  display: inline-block
}
ul.menu li a {
  text-decoration: none;
  color: white
}
.content {
  margin-top: 140px
}

<div class="header_bg">
  <div class="container">
    <ul class="menu">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Service</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </div>
</div>
<div class="container">
  <div class="content">
    /* Content Goes here*/
  </div>
</div>

Answer 1

您需要将threads添加到top:0，详细了解position

.header_bg

* {
   margin: 0;
   padding: 0;
 }
 .header_bg {
   width: 100%;
   height: 100px;
   position: fixed;
   background: black;
   top:0
 }
 .container {
   width: 960px;
   height: auto;
   margin: 0 auto
 }
 ul.menu {
   list-style: none;
 }
 ul.menu li {
   display: inline-block
 }
 ul.menu li a {
   text-decoration: none;
   color: white
 }
 .content {
   margin-top: 140px
 }