导航栏随内容移动答案

【问题标题】：Navigation bar moving with content导航栏随内容移动
【发布时间】：2017-01-16 21:33:06
【问题描述】：

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

我的导航栏位于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>

【问题讨论】：

您应该提供您的 HTML 结构。
谢谢，还没弄清楚如何插入好的代码块。所以我不得不留出很多空间让它工作，这就是我没有这样做的原因。
添加了 HTML / CSS / PHP 文件。

标签： html css html-lists nav

【解决方案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>

【讨论】：

完成！ stackoverflow 很新，所以我已经习惯了这里的所有东西。谢谢。

【解决方案2】：

如果我理解，您希望导航栏保持在页面顶部...如果是这样，那么：尝试这个.. header { position: absolute; top: 0; width: 100%; height: 60px; background-color: #5d585d; border: 5px yellow solid; }

您可以尝试消除这两个： `/* 导航 { 边距顶部：0px； } */

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

【讨论】：