容易忽视的CSS3粘性定位position sticky

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量2.3k 收藏 11
点赞数 1
分类专栏： 前端css 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45709829/article/details/123757588
版权
CSS3粘性定位position sticky
一、介绍

css3中新的定位属性，本身也具有定位元素的属性

理解为相对定位position:relative + 固定定位position:fixed的混合体

position:sticky粘性定位，基于用户的滚动定位

二、基本原理

依赖用户的滚动定位，行为像position:relative，当页面滚动超出目标区域，行为表现为position:fixed

什么是目标区域

相对父元素，超出阈值，这个阈值通过top、left、right、bottom确定

滚动元素

overflow不是visible的元素

流动盒子

粘性定位元素最近的可滚动元素的尺寸盒子。如果没有滚动盒子，则是浏览器视窗盒子

粘性约束矩形

粘性布局元素的父级元素矩形

三、生效的条件

①父元素不能是overflow:hidden/overflow:auto/overflow:scroll/overflow:overlay

②父元素高度不能低于sticky高度，否则无法显示效果

③必须指定top/left/right/bottom任一个方向的属性值

④作用域在父元素内，效果在父元素内生效

⑤在可视范围内为relative，反之是fixed

⑥同一个容器内多个粘性元素彼此独立偏移，可能会发生重叠

四、举例子
（1）语法
div sticky{
	position:-webkit-sticky;/*safair*/
	position:sticky;
	top:0;
}
（2）一个sticky元素
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 2000px;
            width: 100%;
            background-color: rgb(214, 160, 169);
        }

        div {
            height: 200px;
            width: 400px;
            margin-top: 50px;
            background-color: rgb(189, 137, 238);
            border: 1px solid rgb(126, 235, 189);
        }

        nav {
            position: sticky;
            background-color: rgb(146, 189, 238);
            top: 20px;
            /*设置距离顶部20px的时候导航栏开始固定*/
            height: 60px;
            line-height: 60px;
        }
    </style>
</head>

<body>
    <div>
        <nav>导航栏</nav>
    </div>
</body>


</html>

效果展示

粉色背景的盒子是上述的流盒，蓝色为粘性约束的矩形框（父元素div），紫色的为粘性元素（div父里面的nav子）

在这里插入图片描述

向上滚动鼠标，当距离top:20px的时候导航栏固定，但不超过紫色的父亲div

在这里插入图片描述

向上滚动鼠标，父亲div紫色盒子粘性约束矩形超出流盒子，导航栏蓝色盒子也向上滚动了，但是始终在紫色盒子父div里面
在这里插入图片描述

向上滚动鼠标，紫色的盒子超出粉色流盒子，消失在可视范围内

在这里插入图片描述

（3）多个sticky元素
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 2000px;
            width: 100%;
            background-color: rgb(214, 160, 169);
        }

        div {
            height: 200px;
            width: 400px;
            margin-top: 50px;
            background-color: rgb(189, 137, 238);
            border: 1px solid rgb(126, 235, 189);
        }

        nav {
            position: sticky;
            background-color: rgb(146, 189, 238);
            top: 20px;
            /*设置距离顶部20px的时候导航栏开始固定*/
            height: 60px;
            line-height: 60px;
        }

        header {
            position: sticky;
            background-color: rgb(250, 181, 150);
            top: 20px;
            /*设置距离顶部20px的时候导航栏开始固定*/
            height: 60px;
            line-height: 60px;
            display: block;
        }
    </style>
</head>

<body>
    <div>
        <nav>导航栏</nav>

        <header>头部</header>
    </div>
</body>


</html>

效果展示

粉色背景的盒子是上述的流盒，蓝色为粘性约束的矩形框（父元素div），紫色的为粘性元素（div父里面的nav子），橙色的也为粘性元素（div里面的header子）

在这里插入图片描述

向上滚动鼠标，蓝色的导航栏固定，橙色的向上滚动，蓝色和橙色两个粘性元素的粘性约束矩形都在紫色div父里面
在这里插入图片描述

向上滚动鼠标，蓝色的导航栏消失，橙色的盒子固定，覆盖导航栏（证明后面的粘性元素会覆盖前面的粘性元素）

在这里插入图片描述

向上滚动鼠标，橙色的盒子超出粉色流盒子，消失在可视范围内

在这里插入图片描述

总结：当有多个粘性元素的时候，后面的粘性元素会覆盖前面的粘性元素

（4）加上z-index

前文总结了z-index的层级覆盖，来试试加上z-index会发生怎么样的覆盖效果

nav.z-index: 20 header.z-index:19

复习：css中的z-index层级问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 2000px;
            width: 100%;
            background-color: rgb(214, 160, 169);
        }

        div {
            height: 200px;
            width: 400px;
            margin-top: 50px;
            background-color: rgb(189, 137, 238);
            border: 1px solid rgb(126, 235, 189);
        }

        nav {
            position: sticky;
            background-color: rgb(146, 189, 238);
            top: 20px;
            /*设置距离顶部20px的时候导航栏开始固定*/
            height: 60px;
            line-height: 60px;
            z-index: 20;
        }

        header {
            position: sticky;
            background-color: rgb(250, 181, 150);
            top: 20px;
            height: 60px;
            line-height: 60px;
            display: block;
            z-index: 19;
        }
    </style>
</head>

<body>
    <div>
        <nav>导航栏</nav>

        <header>头部</header>
    </div>
</body>


</html>

效果展示

在这里插入图片描述

蓝色的导航栏逐渐覆盖黄色的头部

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

总结：粘性元素生效相当于position:fixed，z-index会生效

傲娇味的草莓
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS 粘性定位position sticky 用法实践
毛祥明-Zoe
08-25 1583
CSS 粘性定位position sticky 用法实践sticky实际效果展示应用场景Note案例代码jsxless sticky css属性position为sticky的元素，根据正常的文档流（flow of the document）进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, b
详解CSS粘性定位 sticky
12-11
总结来说，CSS粘性定位`position: sticky`提供了一种灵活的布局方法，能够在用户滚动时使元素保持可见，但需注意其使用条件和可能存在的兼容性问题。在实际应用中，应结合其他CSS技巧和策略以确保在各种环境下都能...
css粘性定位sticky特性
weixin_43276017的博客
04-26 126
1、样式表 z－index 无效。行内 style 写有效 2、sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效。再抽象出来就是top、bottom、left、right只相对他的父级容器而言。
CSS属性 sticky 粘性定位：固定导航
(黎子)人生编码
06-17 799
position: sticky属性让元素根据用户的滚动位置相对页面视口固定，即使它的父元素不是固定定位的。
css粘性定位position：sticky问题采坑
热门推荐
小熊的博客
07-14 14万+
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav { position...
css粘性定位position:sticky
浩星
08-10 2335
前言： css3中有一个很有趣的属性position:sticky，粘性属性，效果是一个吸顶效果，可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时 (比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 ***注意，这个兼容性特别不好 效果图： 基本用法： nav{ position:st...
CSS3之position:sticky使用
编码世界
11-20 1627
css3中position有个属性值sticky，即粘型定位，初级面试中会经常问到，大多数面试者往往会忽略这个属性值，其可以理解为相对定位（relative）和固定定位(fixed)的结合。
CSS：深入理解粘性定位 position: sticky
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
涨知识啦：css粘性定位position：sticky
sinat_33255495的博客
06-03 594
最近学习了一个新的 css 属性：position：sticky。在开发中还是蛮实用的，记录下来，分享给需要的小伙伴。 知识点 position: sticky; 基于用户的滚动位置来定位。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 需要注意的是想用它，必须要设置一个方向值（top, left, right, bottom） 场景描述 我写了一
css粘性定位position：sticky
MichaelAn的博客
02-13 1231
css粘性定位position：sticky 前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；pos...
position:sticky 粘性定位
卿本无忧的博客
03-03 1万+
position:sticky 粘性定位
详解css粘性定位position：sticky问题采坑
12-14
CSS中的`position: sticky`是一种混合定位方式，它结合了`relative`和`fixed`的特点。在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕...
CSS使用position:sticky 实现粘性布局的方法
09-24
【CSS position:sticky 粘性布局】 在CSS布局中，`position:sticky` 是一个实验性的特性，它提供了一种独特的定位方式，将元素的行为结合了`position:relative` 和 `position:fixed` 的特点。在某些场景下，`...
CSS中的 position属性sticky详解
11-21
`position: sticky`是CSS3引入的新特性，它为开发者提供了一种更为简洁的方法来实现特定场景下的布局需求，特别是当需要元素在页面滚动到一定位置时保持可见，如导航栏。 **1. position: sticky的工作原理** `...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 799
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 991
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 359
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 584
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
css粘性定位position:sticky问题采坑
06-28
CSS粘性定位（position:sticky）是一种新的定位方式，它可以在不同滚动位置下保留元素位置，使得页面更加直观。但是这种方式还存在一些采坑需要注意。 首先是浏览器兼容性问题。目前，不支持CSS粘性定位的浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

傲娇味的草莓

佛系少女只是想记录学习痕迹

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值