css粘性定位失效是什么原因?
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>请试着在这个框架内<b>滚动</b>页面,以理解粘性定位的原理。</p>
<div class="sticky">我是有粘性的!</div>
<div style="padding-bottom:2000px">
<p>在此例中,当您到达元素的滚动位置时,粘性元素将停留在页面顶部(top: 0)。</p>
<p>向上滚动以消除粘性。</p>
<p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera
fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec
et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera
fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec
et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
这个里面只有top为0,才会生效,比如设置为1,想让他距页面1 就不行这是为什么?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
先检查浏览器是否兼容:https://caniuse.com/?search=s...
css 单位里面,如果值是0的话,忽略px单位,如果不为0,需要加上单位