前端进阶html+css03----粘性定位

weixin_43795761

已于 2023-08-08 23:12:15 修改

阅读量629

点赞数

分类专栏： html 文章标签： css3 css html

于 2023-02-27 16:28:00 首次发布

本文链接：https://blog.csdn.net/weixin_43795761/article/details/129108212

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

大家都知道position:absoulte/relative/fixed, 今天介绍一个position:sticky（粘性定位）。

1.粘性定位是相对定位和绝对定位的结合体。
2.使用黏性定位必须要有一个“滚动的祖先元素”，没有滚动的时候和relative效果差不多。
3.当内容足够多并往下滚动的时候，其它元素变化，但粘性定位的区域会一直固定在你设置的位置不动。
4.你设置的（top/bottom/right/left)是相对于滚动父元素的。

<style >
    .box{
        height: 50vh;
        overflow-y: scroll;
    }
   .nav{
      background-color: aqua;
      position: sticky;
      top: 0;
   }
   .header{
      background-color: pink;
   }
</style>
<body>
    <div class="box">
        <div class="header">我是标题</div>
        <div class="nav">我是导航栏</div>
        <div class="header">我是描述</div>
        <div>我是item1</div>
        <div>我是item2</div>
        <div>我是item3</div>
        <div>我是item4</div>
        <div>我是item5</div>
        <div>我是item6</div>
        <div>我是item7</div>
        <div>我是item8</div>
        <div>我是item9</div>
        <div>我是item10</div>
        <div>我是item11</div>
        <div>我是item12</div>
        <div>我是item13</div>
        <div>我是item14</div>
        <div>我是item15</div>
        <div>我是item16</div>
        <div>我是item17</div>
        <div>我是item18</div>
        <div>我是item19</div>
        <div>我是item20</div>
        <div>我是item21</div>
        <div>我是item22</div>
        <div>我是item23</div>
        <div>我是item24</div>
        <div>我是item25</div>
        <div>我是item26</div>
        <div>我是item27</div>
        <div>我是item28</div>
        <div>我是item29</div>
    </div>
</body>

滚动前：

滚动后：

top改为20px的时候滚动时效果。

weixin_43795761

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端进阶html+css03----粘性定位

大家都知道position:absoulte/relative/fixed, 今天介绍一个position:sticky（粘性定位）。3.当内容足够多并往下滚动的时候，其它元素变化，但粘性定位的区域会一直固定在你设置的位置不动。2.使用黏性定位必须要有一个“滚动的祖先元素”，没有滚动的时候和relative效果差不多。4.你设置的（top/bottom/right/left)是相对于滚动父元素的。1.粘性定位是相对定位和绝对定位的结合体。top改为20px的时候滚动时效果。
复制链接

扫一扫