粘性定位的使用

最新推荐文章于 2024-08-02 12:09:11 发布

你要多照镜子

最新推荐文章于 2024-08-02 12:09:11 发布

阅读量501

点赞数

文章标签： css 定位

本文链接：https://blog.csdn.net/weixin_45270158/article/details/118857633

版权

position:sticky;

拉动滚动条当盒子到了设定的偏移量时就会像固定定位一样。

<body>
    <div class="nav">
        <div class="sticky">我是粘性定位</div>
    </div>
</body>
<style>
    body {
        height: 2000px;
    }

    .nav {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        line-height: 40px;
        justify-content: center;

    }

    .sticky {
        width: 80%;
        height: 40px;
        background: red;
        position: sticky;
        top: 40px; 
    }
</style>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

你要多照镜子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
粘性定位的使用

position:sticky;拉动滚动条当盒子到了设定的偏移量时就会像固定定位一样。<body> <div class="nav"> <div class="sticky">我是粘性定位</div> </div></body><style> body { height: 2000px; } .nav { width: 100%
复制链接

扫一扫