css定位 position：sticky

最新推荐文章于 2025-02-28 07:00:00 发布

原创最新推荐文章于 2025-02-28 07:00:00 发布 · 366 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #定位 #position #sticky

HTML 专栏收录该内容

10 篇文章

订阅专栏

本文介绍Sticky定位的特点及使用方法，演示如何通过简单的CSS设置实现元素的粘性定位，并讨论了兼容性问题。

定位有各种各样的类型，我们来看看这个sticky ( 尽管兼容性有些问题，但是却很好用 )；

先来演示一下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position</title>
        <style type="text/css">
             *{
                 margin:0;
                 padding:0;
             }
             .space{
                 width:100%;
                 height:150px;
                 background-color:orange;
             }
             .test{
                 width:100%;
                 height: 200px;
                 background: #000;
                 position:-webkit-sticky;
                 position:sticky;
                 top:0px;
             }
        </style>
    </head>
    <body>
        <div class="space">橘黄色区域</div>
        <div class="test">sticky部分</div>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>
</html>