导航栏随内容移动

Question

我遇到了一个问题，我似乎找不到类似的东西。

我的导航栏位于header。 我的网页内容位于body，div名为.page-content。

当我使用margin-top移动我的内容时，它会远离导航栏，导航栏会跟随。虽然他们不属于同一类或任何东西。有什么我可能做错了吗？

守则：

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}
header {
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #5d585d;
  margin-top: 0px;
}
body {
  margin: auto;
  width: 100%;
  background-color: lightgray;
}
nav {
  margin-top: 0px;
}
nav ul {
  float: right;
  margin-top: 20px;
  margin-right: 150px;
  height: 25px;
}
nav ul li {
  list-style: none;
  float: left;
  margin-right: 20px;
  display: inline-block;
}
nav ul li a {
  color: white;
  font-family: Arial;
  font-size: 16px;
}
nav {
  margin-top: 0px;
}
.page-content {
  margin-top: 40px;
}
.page-content {
  background-color: rgba(255, 255, 255, 0.23);
  margin: 0 auto;
  margin-top: 300px;
  width: 50%;
  display: table;
  border: 1px solid red;
  color: white;
}
.page-content p {
  margin: 0 auto;
  margin-top: 60px;
  display: table;
  border: 1px solid red;
}
.dropdownmenu {
  position: relative;
  display: inline-block;
}
.dropbtn {
  background-color: #b4efed;
  color: #2a6d85;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #cbfffd;
}

<header class="navbarheader">
  <nav>
    <ul>
      <li><a href="index.php">HOME</a>
      </li>

    </ul>

    <div class="dropdown">
      <button class="dropbtn">OVER MIJ</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>



  </nav>
</header>

<div class="page-content">

  <p>TEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT
    TEST TEXTTEST TEXTTEST TEXTTEST TEXT
  </p>


</div>

Answer 1

因为您在position:fixed中使用header，因此需要在padding-top

中设置.page-content

如果您不需要它fixed，那么只需删除该属性。

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  background-color: lightgray;
}
header {
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: #5d585d;
}
nav ul {
  float: right;
  margin-top: 20px;
  margin-right: 150px;
  height: 25px;
}
nav ul li {
  list-style: none;
  float: left;
  margin-right: 20px;
}
nav ul li a {
  text-decoration: none
}
.page-content {
  background-color: rgba(255, 255, 255, 0.23);
  margin: 0 auto;
  padding-top: 65px; /* new */
  width: 50%;
  display: table;
  border: 1px solid red;
  color: white;
}
.page-content p {
  margin: 0 auto;
  margin-top: 60px;
  display: table;
  border: 1px solid red;
}
.dropdownmenu {
  position: relative;
  display: inline-block;
}
.dropbtn {
  background-color: #b4efed;
  color: #2a6d85;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #cbfffd;
}

<header class="navbarheader">
  <nav>
    <ul>
      <li><a href="index.php">HOME</a>
      </li>
    </ul>
    <div class="dropdown">
      <button class="dropbtn">OVER MIJ</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </nav>
</header>
<div class="page-content">
  <p>TEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT TEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXTTEST TEXT
    TEST TEXTTEST TEXTTEST TEXTTEST TEXT
  </p>
</div>