Question

我正在尝试创建一个非常简单的网站。我的<nav>标签中有一个纯CSS下拉菜单。在导航栏下方，我有<header>个标签。

由于我已将<nav>标记设置为position: absolute，我的标题自然会向上移动，因此我应用margin: 50px 0 0 0将其移回。然而，我的导航似乎随之向下移动，并且不会从导航中清除。

我根本就不明白。首先，nav标记位于标题上方，并使用position: absolute。

这是我的代码

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: black;
  color: black;
  width: 800px;
  margin: auto;
}

nav {
  background-color: #FFF;
  color: #000;
  position: absolute;
  width: 800px;
}

header {
  color: white;
  margin: 50px 0 0 0;
}

main {
  width: 60%;
  background-color: #FFF;
  color: #000;
}

aside {	
  width: 30%;
  background-color: #FFF;
  float: right;
}

<nav>	
  <ul>
    <li><a href='index.php'>Home</a></li>
    <li><s>About</s></li>
    <li><s>Plugins</s></li>
    <li>Guest
    <ul>
      <li><s>Login</s></li>
    </li>
  </ul>
</nav>

<header>
  <h2>Welcome</h2>
</header>

<main>
  <p>Main Content</p>
</main>

<aside>
  <p>Side bar</p>
</aside>

Answer 1

从它的外观来看，您的nav元素不需要绝对定位。如果您想将其固定在顶部，您甚至可以尝试使用position: fixed;。

我真的认为你需要做的是删除position: absolute;，但如果由于某种原因你绝对需要它，请添加

top: 0; 
left: 0;
right: 0;

到nav元素的CSS。

此外，你应该尝试使用容器，而不是在你的身体元素上设置宽度，这会使你现在的方式变得不那么灵活。

.container {
    margin: auto;
    position: relative;
    width: 800px;
}

（有点奇怪的宽度，但为什么800px？）

如果您不能这样做，并且您希望导航仍然是身体的宽度，请将position: relative;添加到身体。

Answer 2

如果我说得对，它的名称为margin collapse并且是标准的浏览器行为，因此为了防止它，您可以完全使用padding或只是将padding-top: 1px;添加到您的nav元素。

 nav {
      background-color: #FFF;
      color: #000;
      position: absolute;
      width: 800px;
      padding-top: 1px
}

header {
      color: white;
      margin: 49px 0 0 0;
}

当我将保证金放在<header> </header> </nav>上时，我的<nav>向下移动

2 个答案: