css粘性定位失效是什么原因?

发布于 2022-09-13 23:55:23 字数 1369 浏览 19 评论 0

<!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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

毁梦 2022-09-20 23:55:23

先检查浏览器是否兼容:https://caniuse.com/?search=s...

can I use sticky

css 单位里面,如果值是0的话,忽略px单位,如果不为0,需要加上单位

top: 0;
top: 1px;
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文