所以我试图将此导航栏粘贴到标题的底部，但它粘贴在标题的顶部而不是底部（我想要的底部）。导航栏应停留在标题的底部，并在用户向下滚动时保持该状态。
到目前为止，页眉和导航都设置为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
nav
{
position: fixed;
top: 48px;
display:block;
background-color: yellow;
width: 10rem;
}
有position:relative;在wrapper股利和position:fixed;在nav
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句