虽然我设置了top 0，但HTML5位置粘滞不能工作
虽然我设置了top 0，但HTML5位置粘滞不能工作
提问于 2018-11-21 16:22:37
/* site navigation bar */
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p {
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link,
nav.sitenavigation a:visited {
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
color: #33cc00;
}
p{
margin: 2000px;
}<body>
<div>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</div>
<p>ABC
</p>
</body>
我已经尝试了很多方法让我的导航栏停留在顶部，但它没有。我已经将HTML样式重置为overflow: auto。它显示like position: relative而不是position: sticky
回答 3
Stack Overflow用户
发布于 2018-11-21 16:31:07
position: sticky在高度足够长的情况下工作。
你能让div (在下面的body中)变成div style="height: 1000px;"吗？
在我的例子中，这种风格效果很好。
Stack Overflow用户
发布于 2018-11-21 16:42:52
设置相对容器的高度
/* site navigation bar */
body {height: 800rem;}
nav.sitenavigation {
position: sticky;
top: 0;
clear: both;
text-align: center;
color: #000000;
font-size: 1.4em;
background-color: #f0f8ff;
margin: 50px auto;
}
nav.sitenavigation p{
display: inline-block;
margin: 0.5em;
padding-right: 5em;
}
nav.sitenavigation a:link, nav.sitenavigation a:visited{
text-decoration: none;
color: #000000;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus{
color: #33cc00;
}<body>
<nav class="sitenavigation">
<p><a href="index.html">🏠 Home</a></p>
<p><a href="listing.html">📖 Item Listing</a></p>
<p><a href="order.html">🛒 Your Order</a></p>
<p><a href="contactus.html">☎ Contact Us</a></p>
</nav>
</body>
Stack Overflow用户
发布于 2018-11-21 16:30:46
根据定义，您看到的相对位置将是正确的：
粘性元素根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中满足给定的偏移位置-然后它就会“固定”在适当的位置(如位置:固定)。https://www.w3schools.com/Css/css_positioning.asp
如果您的导航应该放在顶部，而不考虑滚动，那么您很可能希望使用position: absolute
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53407830
复制相关文章
相似问题
腾讯云开发者
