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

Question

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

发布于
2021-09-20

<!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 就不行这是为什么？

css 前端

阅读 3.1k

1 个回答

zomoon_com

✓ 已被采纳

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

can I use sticky