z-index的工作原理

z-index的工作原理

HTML文档中的元素却是存在于三个维度之中。除了大家熟知的平面画布中的x轴和y轴,还有控制第三维度的z轴。
在这里插入图片描述

像 margin , float , offset 这些属性,控制着元素在x轴和y轴上的表现形式一样。 z-index 这个属性控制着元素在z轴上的表现形式。

z-index 属性指定一个元素的堆叠顺序。
堆叠顺序是当前元素位于z轴上的值。数值越大表明元素的堆叠顺序越高,越靠近屏幕。
在这里插入图片描述

如果未指定 z-index 的属性,元素的堆叠顺序基于它所在的文档树。默认情况下,文档中后来声明的元素具有更高的堆叠顺序。

除了指定的 z-index,元素的堆叠顺序是由大量的因素控制的。元素按照下面表格顺序进行堆叠。
在这里插入图片描述

堆叠上下文(Stacking Contex)
当我们用 z-index 属性指定元素的堆叠顺序时,我们并不总是指定这个元素的堆叠顺序相关于页面内的其他元素。元素的堆叠顺序只是相关于其堆叠上下文。
这可能会导致一些奇怪的情况,比如具有较大 z-index 的元素并不总是位于具有较低 z-index 元素的上方。
可以用下面的规则解释堆叠上下文。

默认堆叠上下文是根元素
任何HTML文档默认的堆叠上下文都是 元素。因此,除非创建新的堆叠上下文,默认情况下,元素的堆叠顺序相关于页面内的其他元素。

用 z-index 属性建立一个新的堆叠上下文
我们是通过为一个元素的 z-index 属性设置一个整数值来建立新的堆叠上下文。为达到预期效果,首先,设置该整数为当前元素的堆叠顺序,其次,创建一个新的堆叠上下文。
新的堆叠上下文适用于该元素的任何子元素。子元素只和这个层堆叠上下文有关,和根堆叠上下文无关。
在下面的示例中,.foo 属于堆叠上下文 1,而.bar 属于堆叠上下文 2。

在这里插入图片描述

元素的堆叠顺序不能高于 (或低于) 父元素的堆叠顺序
当父元素的堆叠顺序被设置的时候,这也意味着,它的子元素的堆叠顺序不能高于或低于这一顺序 (相对于父元素的堆叠上下文)。
在下面的示例中,即使 .bar 的 z-index 值高于 .baz,它依然显示 .baz 下方。这是因为,在堆叠上下文1中,.bar 不能高于或低于堆叠顺序1。
.foo { z-index: 1; }.
bar { z-index: 1000; }.
baz { z-index: 2; }

z-index适用范围:它必须在被设定了 position 属性元素上时才会生效,这意味着, z-index 只有在 position 设置为除 static 属性上的元素上时,它才能更改层叠顺序,在元素没有设置任何 position 的情况下,z-index 将不会起任何作用。

z-index 仅适用于元素在其所属的层叠上下文中的位置。
层叠上下文涉及到了 HTML 节点和它的所有子节点, HTML 元素位于层叠上下文的 root 级别,它可以被称为根层叠。
文档的默认层叠上下文(或"根层叠上下文")将 HTML 元素标记为其"根层叠",并且默认情况下,所有元素都属于此根层叠上下文,但是,任何元素节点也可以是其"局部层叠上下文"中的根层叠。
你可以通过以下几种方法将元素指定为新的局部层叠上下文的根层叠:
1.在设置了 position 为 absolute 或 relative 或其它任何除了 auto 属性上设置 z-index
2.使用 position: fixed 或 position: sticky
3.元素上设置的 opacity 属性值小于1
4.在元素上使用 transform 或 will-change

例:假设fatherA和fatherB处于同一个父盒子下,属于兄弟结点
.fatherA {z-index:100} .fatherA sonA {z-index:100000}
.fatherB {z-index:200} .fatherB sonB {z-index:50}
我们可以看到,虽然sonA的z-index大于sonB。但是sonB层级比sonA高,覆盖于sonA之上。这是因为fatherB的层级大于fatherA

这就说明,并不是z-index越大,离屏幕越近,而是必须同一个层叠上下文环境下(即以同一个元素作为根层叠,记住,能作为根层叠的,必须是设置了定位fixed\absolute\fixed的元素。如果当前父节点不是根层叠,那么就会默认想上找设置了定位的祖先结点,最后招不到才是html标签)z-index越大,离屏幕越近
fatherA和fatherB是处于同一个层叠上下文环境,sonA和sonB是基于不同的层叠上下文环境,fatherA层级比fatherB高,那么fatherA的子集就一定会比fatherB的子集离屏幕更近(即使fatherA的子集设置了负数的z-index,也会比fatherB的子集高)

所以,我们判断两个元素谁的层级高,谁离屏幕更近,优先要看两个元素,谁的层叠上下文环境层级高(即根层叠元素的层级);其次才是如果处于同一个层叠上下文环境,才会去比较二者的z-index

我们之前碰到的antd 的 modal会被其他组件覆盖,实际上就是因为层叠上下文环境的影响,所以modal才会给出getContainer属性

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/38720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不使用AMap.DistrictSearch,通过poi数据绘制省市县区块

个人申请高德地图key时无法使用AMap.DistrictSearch,可以通过poi数据绘制省市县区块 1.进入POI数据网站找到需要的省市县,下载对应的GeoJson文件 ,此处为poi数据网站链接 2.​ 处理geoJson数据,可以直接新建json文件,…

FIPS PUB 196 ENTITY AUTHENTICATION USING PUBLIC KEY CRYPTOGRAPHY

部分原文 3.3 Mutual authentication protocol The following mutual entity authentication protocol is based on Section 522. “Three pass authentication”, ofISO/IEC 9798-3. Certain authentication token fields and protocol steps are specified in greater deta…

在Windows命令行中设置定时关机

在Windows命令行中设置定时关机,你可以使用shutdown命令。下面是几个实用的例子: 立即关机: shutdown /s /t 0延迟关机: 假设你想在30分钟后关机,可以使用(30分钟等于1800秒):shutdown /s /t 1800定时关机: 如果你想在…

【机器学习】在【Pycharm】中的实践教程:使用【逻辑回归模型】进行【乳腺癌检测】

目录 案例背景 具体问题 1. 环境准备 小李的理解 知识点 2. 数据准备 2.1 导入必要的库和数据集 小李的理解 知识点 2.2 数据集基本信息 小李的理解 知识点 注意事项 3. 数据预处理 3.1 划分训练集和测试集 小李的理解 知识点 注意事项 3.2 数据标准化 小李…

controller不同的后端路径对应vue前端传递数据发送请求的方式,vue请求参数 param 与data 如何对应后端参数

目录 案例一: 为什么使用post发送请求,参数依旧会被拼接带url上呢?这应该就是param 与data传参的区别。即param传参数参数会被拼接到url后,data会以请求体传递 补充:后端controller 参数上如果没写任何注解&#xff0c…

第二高的薪水

第二高的薪水: 描述 查询并返回 Employee 表中第二高的薪水 。如果不存在第二高的薪水,查询应该返回 null(Pandas 则返回 None) pandas import pandas as pddef second_highest_salary(employee: pd.DataFrame):# 1. 删除所有重复的薪水.employee emp…

第一后裔进不去游戏怎么办 第一后裔免费加速器推荐

Steam年度最热心愿榜单第五的游戏终于上线了,包好玩的新游,第一后裔,为什么说他肯定好玩呢?因为游戏第一次测试在两年前就开始了,中间也断断续续测试了好多次,很多小伙伴都是体验过游戏的,经过多…

MySQL 9.0正式版本来了!

MySQL 9.0 第一个正式版本于 2024 年 7 月 1 日发布,这是一个创新版,意味着它会增加一些新功能、修复一些问题并弃用一些旧功能。 性能相关 MySQL 9.0 支持将 EXPLAIN ANALYZE 命令输出的 JSON 数据存储到用户定义的变量中,语法如下&#x…

【硬件模块】PN532 NFC读卡串口通信

PN532 PN532是一款功能丰富的非接触式通讯收发模块,其基于8051单片机核心,集成了多种通信接口和工作模式,以满足不同应用场景的需求。以下是PN532功能相关的详细介绍: 多种通信接口:PN532支持I2C、SPI和UART&#xff0…

MySQL的安装和环境配置

1.下载MySQL安装MySQL 选Custom选项为高级自定义模式 2.配置MySQL环境 安装好之后,在桌面右键点击我的电脑(有些是此电脑),然后点击属性,进入系统信息设置,接着点击高级,进入环境变量界面,进入环境变量界面…

【Spring Boot】Java 持久层 API:JPA

Java 持久层 API:JPA 1.Spring Data1.1 主要模块1.2 社区模块 2.JPA3.使用 JPA3.1 添加 JPA 和 MySQL 数据库的依赖3.2 配置数据库连接信息 4.了解 JPA 注解和属性4.1 常用注解4.2 映射关系的注解4.3 映射关系的属性 5.用 JPA 构建实体数据表 1.Spring Data Spring…

Redis基础教程(十):HyperLogLog

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝&#x1f49…

Linux爱好者能对Linux痴迷到什么程度?

在开始前刚好我有一些资料,是我根据网友给的问题精心整理了一份「Linux的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!!曾经想帮助全世界的人卸载掉…

归并排序——有序序列的合并

目录 1、简述 2、复杂度 3、稳定性 4、例子 1、简述 有序序列的合并(Merge of Sorted Sequences)是归并排序的核心步骤之一。其目的是将两个已经排序的序列合并成一个新的有序序列。这个过程在归并排序中非常重要,因为归并排序通过递归地…

技术职务管理助力智慧校园建设:深入解读人事系统

智慧校园人事系统中的技术职务管理模块,专注于高校及教育机构内技术人员及科研人员的职务管理,涵盖职称评审、技术职务任命、项目参与记录、科研成果跟踪及技术能力评估等多个方面,旨在通过信息化手段提升技术人才管理的效率与科学性。 在这一…

Windows如何安装并启动Nginx

0、前言 Nginx 是一款高性能、轻量级的Web服务器和反向代理服务器,广泛应用于互联网领域。它以其高效稳定、内存占用少和丰富的模块化设计而受到开发者们的青睐。 在实际使用过程中,我们多数时候会在Linux系统上运行Nginx,但实际上&#xff…

单目行车测距摄像系统(单目测距-行车)

单目行车测距摄像系统是一种利用单个摄像头实现车辆行驶中前方障碍物距离测量的技术。该系统通过计算机视觉算法,能够实时分析摄像头捕捉的图像,精确计算出车辆与前方物体之间的距离,对于自动驾驶、高级驾驶辅助系统(ADAS&#xf…

PMP考试没通过别担心,补救办法来了

2024年6月PMP考试成绩正在陆续分批次发布。没有考试通过的同学就会疑问,考试没考过怎么办?可不可以补考?面对PMP考试没通过的情况,我们应该如何应对呢? 首先要告诉大家一个好消息!6月考试不通过的考生可以…

24年hvv不要掉进秘网了,特别别被反制了

这两年的hvv,防守方已经不单单是每天坐那看监控、封ip了,越来越多的大佬投身防守工作中,让防守从被动变成了一个主动的活了。 目前最常见的主动防守有2种,1、长时间的蜜罐运营。2、蜜罐反制。 01-蜜罐运营 蜜罐这个词干安全的都…

七、函数练习

目录 1. 写一个函数可以判断一个数是不是素数。(素数只能被1或其本身整除的数) 2. 一个函数判断一年是不是闰年。 3.写一个函数,实现一个整形有序数组的二分查找。 4. 写一个函数,每调用一次这个函数,使得num每次增…