导航栏随内容移动

Question

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

我的导航栏在header。我的页面内容在 body 中，有一个名为 .page-content 的 div。

当我使用 margin-top 移动我的内容时，它会远离导航栏，导航栏也会随之移动。虽然它们不在同一个 class 或任何地方。我可能做错了什么吗？

代码：

* {
  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

因为您在 header 中使用 position:fixed 您需要在 .page-content

中设置 padding-top

如果您不需要它是 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>

Answer 2

据我了解，您希望导航栏位于页面顶部...如果是这样的话：试试这个.. header { position: absolute; top: 0; width: 100%; height: 60px; background-color: #5d585d; border: 5px yellow solid; }

你可以尝试消除这两个： `/*导航{ margin-top: 0px; } */

 /* nav {
      margin-top: 0px;
    } */`

导航栏随内容移动

Navigation bar moving with content

html

css

html-lists

nav