html - 导航栏不粘在标题元素的底部

Question

所以我试图将此导航栏粘贴到标题的底部，但它粘贴到标题的顶部而不是底部(我想要的)。导航应该固定在标题的底部，并在用户向下滚动时保持原样。

截至目前，标题和导航设置为 position:fixed 并在向下滚动时将鼠标悬停在文本上(就像它应该的那样)......但是导航坚持在标题的顶部而不是底部，因此切割在这种情况下关闭第一部分 (1)。我敢肯定它非常简单，但我能知道如何只用 css 来解决这个问题吗？我不确定如何为固定的非嵌套元素执行此操作(因为它们不能正常堆叠)

<div id="wrapper">
  <header></header>

<nav>
   <ul>
      <li href="#">1</a></li>
      <li href="#">2</a></li>
      <li href="#">3</a></li>                   
   </ul>
</nav>

<main>
  <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 

</main>
</wrapper>

html

header{
   position: fixed;
   background-color: #333;
   padding-left: .5rem;
   width: 100%;
   font-size: 1rem;
   padding-bottom: 1rem;
   padding-top: 1rem;
   z-index: 100;
}

nav{
  position: fixed;
  top 0;

   display:block;
   background-color: yellow;
   width: 10rem;
}

CSS

这说明了现在正在发生的事情: http://codepen.io/anon/pen/XKbVVX

Answer 1

稍微修改了您的代码。希望这会有所帮助

body {
  margin: 0px;
  padding: 0px;
}
header {
  margin-top: -16px;
  position: fixed;
  background-color: #333;
  padding-left: .5em;
  width: 100%;
  font-size: 1em;
  padding-bottom: 1em;
  padding-top: 1rem;
  z-index: 100;
}
nav ul {
  position: fixed;
  margin-top: 16px;
  display: block;
  background-color: yellow;
  width: 10em;
}
main {
  margin-left: 15em;
}

<div id="wrapper">
  <header></header>

  <nav>
    <ul>
      <li href="#">1</li>
      <li href="#">2</li>
      <li href="#">3</li>
    </ul>
  </nav>

  <main>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>

  </main>
</div>