站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

粘性定位是css3新增的吗

时间:2022-06-21 [网络编程]作者:fabuyuan 浏览:1 次

粘性定位是css3新增的,粘性定位指的是position定位属性值设置为sticky,表示基于用户的滚动位置来定位,元素定位表现为在跨越特定阈值前为相对定位,之后是固定定位,语法为“元素{position: sticky;}”。

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

粘性定位是css3新增的吗

CSS3粘性定位position sticky

一、介绍

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

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

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

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

二、基本原理

依赖用户的滚动定位,行为像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)语法
p 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);
        }

        p {
            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>
    <p>
        <nav>导航栏</nav>
    </p></body></html>

效果展示

粉色背景的盒子是上述的流盒,蓝色为粘性约束的矩形框(父元素p),紫色的为粘性元素(p父里面的nav子)

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

向上滚动鼠标,父亲p紫色盒子粘性约束矩形超出流盒子,导航栏蓝色盒子也向上滚动了,但是始终在紫色盒子父p里面

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

(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);
        }

        p {
            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>
    <p>
        <nav>导航栏</nav>

        <header>头部</header>
    </p></body></html>

效果展示

粉色背景的盒子是上述的流盒,蓝色为粘性约束的矩形框(父元素p),紫色的为粘性元素(p父里面的nav子),橙色的也为粘性元素(p里面的header子)

向上滚动鼠标,蓝色的导航栏固定,橙色的向上滚动,蓝色和橙色两个粘性元素的粘性约束矩形都在紫色p父里面

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

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

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

(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);
        }

        p {
            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>
    <p>
        <nav>导航栏</nav>

        <header>头部</header>
    </p></body></html>

效果展示

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

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

(学习视频分享:css视频教程html视频教程)

以上就是粘性定位是css3新增的吗的详细内容,更多请关注站长家园其它相关文章!

本文标签:  css

转载请注明来源:粘性定位是css3新增的吗

本文永久链接地址:https://www.adminjie.com/post/13724.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 粘性定位是css3新增的吗

      粘性定位是css3新增的吗

      粘性定位是css3新增的,粘性定位指的是position定位属性值设置为sticky,表示基于用户的滚动位置来定位,元素定位表现为在跨越特定阈值前为相对定位,之...

    • mysql中执行存储过程的语句是什么

      mysql中执行存储过程的语句是什么

      mysql中执行存储过程的语句是“CALL”。CALL语句可以调用指定存储过程,调用存储过程后,数据库系统将执行存储过程中的SQL语句,然后将结果返回给输出值;...

    • css3浮动是什么意思

      css3浮动是什么意思

      css3浮动指的是元素会脱离文档的普通流,根据float的值向左或向右移动,直到外边界碰到父元素的内边界或者另一个浮动元素的外边界为止;浮动会使元素向左或者向右...

    • css3的盒子模型有什么用

      css3的盒子模型有什么用

      css3的盒子模型的作用是通过定义一系列与盒子相关的属性,可以丰富和促进各个盒子以及整个HTML文档的表现效果和布局结构;盒子模型就是在网页设计中常用的css技...

    • mysql与oracle有区别吗

      mysql与oracle有区别吗

      mysql与oracle有区别:1、Oracle是一个对象关系数据库管理系统(ORDBMS),而MySQL是一个关系数据库管理系统(RDBMS);2、Oracl...

    热门文章