Question

所以我试图将这个导航栏固定在标题的底部，但它会粘在它的顶部而不是底部（我想要的）。导航应该粘在标题的底部，并在用户向下滚动时保持这种状态。

截至目前，标题和导航设置为位置：固定并将鼠标悬停在文本上，因为它向下滚动（就像它应该的那样）...但是导航会粘到标题的顶部而不是底部，因此切割在这种情况下，从第一部分（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

nav
{
 position: fixed;
 top: 48px;
 display:block;
 background-color: yellow;
 width: 10rem;
 }

Pen

position:relative; div中的wrapper和position:fixed;中的nav

Answer 2

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

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>

Answer 3

最后一个结束标记必须是</div>，而不是</wrapper>，而CSS top 0;必须是top: 0;。

要使导航正好位于标题下方，您应该为标题指定一个精确的高度，然后对导航的top使用相同的数字。像这样：

＆＃13;

header{
   position: fixed;
   top: 0;
   background-color: #333;
   height: 48px;
   box-sizing: border-box;
   padding-left: .5rem;
   width: 100%;
   font-size: 1rem;
   padding-bottom: 1rem;
   padding-top: 1rem;
   z-index: 100;
}

nav{
  position: fixed;
  top: 48px;

   display:block;
   background-color: yellow;
   width: 10rem;
}

＆＃13;

<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>
</div>

＆＃13;

Answer 4

另一个解决方案是将导航链接放在<{1}}下的header nav下，并将您希望成为div中栏的顶部，然后按照你原定的方式对两者进行不同的设计。

HTML大纲：

<header> <div> <p>The top of the bar!</p </div> <nav> <uk> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </nav> </header>

要使用的CSS：

header { postiion: fixed; } header div { background-color: orange; color: white; padding: 2em; } header nav { background-color: yellow; }

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

4 个答案: