css定位（二）---css中粘性定位（sticky）---C3新增属性

最新推荐文章于 2023-12-08 22:07:13 发布

兰兰的风。。。

最新推荐文章于 2023-12-08 22:07:13 发布

阅读量399

点赞数

分类专栏： # css 文章标签： sticky定位

本文链接：https://blog.csdn.net/pilgrim_121/article/details/119874361

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

作用：相对定位（position:relative）和固定定位（position:fixed）的混合。sticky相当于加了一个滚动事件的处理，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。当滚动到父元素不在可视区域范围内时，定位效果就会消失。
使用条件：

父元素不能overflow:hidden（容器无法滚动）
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度
sticky元素仅在其父元素内生效

实现效果：
在这里插入图片描述
实现代码：

<body>
    <div class="topcontent">最上面的内容</div>
    <div id="sticky-nav">导航栏，给sticky定位top=0px</div>
    <div class="box1" style="background-color: pink;position: relative;">盒子1
        <div class="child" style="position: absolute;bottom: 0;">这里到达PC端浏览器视口高度的最下方了</div>
    </div>
    <div class="box2" style="background-color: cyan;">盒子2
    </div>
    <div class="box2" style="background-color: gray;">盒子3</div>
</body>

* {
   margin: 0;
    padding: 0
}

html body {
    height: 100vh;/* 表示body的高度是当前可视窗口的高度。如果这里不加，那么当页面滚动到sticky-nav距离body上部为0px时，sticky-nav将始终处于固定定位的样子 */
    width: 100%
}

.topcontent {
    height: 200px;
    background-color: lightblue;
}

#sticky-nav {
    position: sticky;
    top: 0px;
    /*sticky-nav变为固定定位 box1此时相对定位，设置z-index是为了让sticky-nav始终在页面上方 */
    z-index: 9;
    width: 100%;
    height: 80px;
    background-color: yellowgreen;
}

div[class^='box'] {
    height: 225px;
}

兰兰的风。。。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css定位（二）---css中粘性定位（sticky）---C3新增属性

作用：相对定位（position:relative）和固定定位（position:fixed）的混合。sticky相当于加了一个滚动事件的处理，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。当滚动到父元素不在可视区域范围内时，定位效果就会消失。使用条件：父元素不能overflow:hidden（容器无法滚动）必须指定top、bottom、left、right4个值之一，
复制链接

扫一扫