当前位置： 首页 > news >正文

层叠上下文、层叠顺序

news 2025/7/7 0:18:54

原文合集地址如下，有需要的朋友可以关注

本文地址

什么是层叠上下文

层叠上下文（Stacking Context）是指在 HTML 和 CSS 中，用于控制和管理元素层叠顺序以及呈现的一种机制。在一个网页中，许多元素（例如文本、图像、背景等）可能会重叠在一起，这时候就需要一种方法来决定哪个元素应该显示在前面，哪个元素应该显示在后面。

层叠上下文的原则是通过一系列的规则来确定元素的层叠顺序，这些规则可以根据元素的属性、内容、位置等来决定。每个层叠上下文都是一个独立的层叠环境，元素在不同的层叠上下文中可以相互叠加，但不会影响到其他上下文中的元素。

具象的比喻：你可以把层叠上下文元素理解为理解为该元素当了官，而其他非层叠上下文元素则可以理解为普通群众。凡是“当了官的元素”就比普通元素等级要高，也就是说元素在Z轴上更靠上，更靠近观察者。

形成层叠上下文的条件

  1. 根元素：整个文档的根元素（通常是 <html>）自动创建一个层叠上下文。
  2. 定位元素：使用相对定位、绝对定位或固定定位的元素会创建一个新的层叠上下文。
  3. CSS 属性：一些 CSS 属性，如 z-index，可以用来控制元素的层叠顺序，同时创建一个新的层叠上下文。
  4. Flex 容器：具有 display: flex 或 display: inline-flex 属性的元素的子元素会创建一个新的层叠上下文。
  5. Grid 容器：具有 display: grid 或 display: inline-grid 属性的元素的子元素会创建一个新的层叠上下文。
  6. 某些 CSS 伪元素和伪类：例如 ::before 和 ::after 伪元素。
  7. transform属性不为none的元素
  8. opacity属性值小于1的元素
  9. filter属性值不为none的元素
  10. perspective属性不为none的元素
  11. mix-blend-mode属性不为normal的元素
  12. isolation属性被设置为isolate的元素
  13. will-change属性指定了上面属性的元素
  14. webkit-overflow-scrolling属性被设置touch的元素

层叠顺序

层叠顺序(Stacking Order)指的是元素发生层叠时的垂直显示顺序。当元素位置互相重叠时,层叠顺序决定哪一个元素会覆盖在另一个元素的上方。
层叠顺序从后往前依次为:

  1. 背景和边框(background和border)
  2. 负z-index
  3. 块级盒子(block)
  4. 浮动盒子(float)
  5. 行内盒子(inline/inline-block)
  6. z-index为0或auto的定位盒子(positioned)
  7. 正z-index
    其中,层叠顺序比较遵循以下原则:
  • z-index大的覆盖z-index小的（谁大谁上：在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的）
  • z-index相同时,层叠顺序在后的覆盖前的（后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。）
  • 层叠顺序最后面的背景和边框总是在最下面

需要注意的是:

  • 层叠顺序只在同一个层叠上下文中有效
  • 创建了层叠上下文的元素会显示在普通流元素的上方

就好比两个同职称的人，所在等级不一样，是没有可比性的。就好比董事长的秘书和什么经理科长的秘书虽然同为秘书，那等级一目了然。

举例

例子一

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {position: relative;width: 100px;height: 100px;}p {position: absolute;font-size: 20px;width: 100px;height: 100px;}.a {background-color: blue;z-index: 1;}.b {background-color: green;z-index: 2;top: 20px;left: 20px;}.c {background-color: red;z-index: 3;top: -20px;left: 40px;}</style></head><body><div><p class="a">a</p><p class="b">b</p></div><div><p class="c">c</p></div></body>
</html>

在这里插入图片描述
两个

元素都创建了自己的层叠上下文。div的默认position是static，但是内部的

元素的position被设置为absolute，因此它们可以定位。p.a、p.b和p.c都位于各自的div内，并且应用了不同的z-index和定位属性。p.c元素的z-index最高，所以它在层叠顺序中位于最上面，即使它位于第二个div内，它仍然会覆盖在第一个div内的元素上面。
p.b元素位于第一个div内，因此它在第一个div内的p.a元素上面，并且由于p.b的定位，它距离div的左上角有20px的偏移。p.a元素位于第一个div内，因此它位于底部，被p.b和p.c元素所覆盖。最终，p.c元素在最上面，呈现为红色，p.b元素在中间，呈现为绿色，而p.a元素在底部，呈现为蓝色。

例子二

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 100px;height: 100px;position: relative;}.box1 {z-index: 2;}.box2 {z-index: 1;}p {position: absolute;font-size: 20px;width: 100px;height: 100px;}.a {background-color: blue;z-index: 100;}.b {background-color: green;top: 20px;left: 20px;z-index: 200;}.c {background-color: red;top: -20px;left: 40px;text-align: right;z-index: 9999;}</style></head><body><div class="box1"><p class="a">a</p><p class="b">b</p></div><div class="box2"><p class="c">c</p></div></body>
</html>

在这里插入图片描述
解析:

  1. div.box1和div.box2作为两个块级元素,层叠顺序按照代码顺序,div.box1在下方。
  2. p标签都是绝对定位的,所以按照z-index的值排序。
  3. p.c的z-index最大,在最上方显示。
  4. p.b的z-index其次,显示在p.c下方。
  5. p.a的z-index最小,但在div.box1内部,所以显示在div和p.b之上。
  6. div.box1作为父级元素,始终在最下方,作为背景和边框显示。
    所以最终展示的层叠顺序从下到上应该是:
    div.box1 < p.b < p.c < p.a
    符合层叠顺序的规定,z-index大的在上层,相同z-index按代码顺序层叠。

例子三·
z-index: ‘auto’

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>.box1,.box2 {position: relative;z-index: auto;}.child1 {width: 200px;height: 100px;background: #168bf5;position: absolute;top: 0;left: 0;z-index: 2;}.child2 {width: 100px;height: 200px;background: #32c292;position: absolute;top: 0;left: 0;z-index: 1;}</style><body><div class="box1"><div class="child1">child1</div></div><div class="box2"><div class="child2">child2</div></div></body>
</html>

在这里插入图片描述

解析:

  1. div.box1 和 div.box2 都是正常的块级元素,没有开启层叠上下文,根据代码顺序,div.box1 在下方。
  2. div.child1 和 div.child2 都是绝对定位的,所以会开启层叠上下文,不会被父元素的层叠顺序影响。
  3. div.child1 的 z-index 值更大,所以会显示在 div.child2 的上方。
  4. 最后,普通流的 div.box1 和 div.box2 会显示在 创建了层叠上下文的 div.child1 和 div.child2下方。
    所以根据层叠顺序的规则,上述显示顺序从下到上为:
    div.box1 -> div.box2 -> div.child2 -> div.child1

将 .box1,.box2的z-index设置为数值0，效果就不一样了

.box1,.box2 {position: relative;z-index: 0}

在这里插入图片描述
解析:

  1. div.box1和div.box2由于有z-index,创建了层叠上下文,会显示在普通流元素上方。
  2. div.box1层叠上下文内,div.child2的z-index是1,显示在div.box1下方。
  3. div.box2层叠上下文内,div.child1的z-index是2,显示在div.box2下方。
  4. 两个层叠上下文,div.box1在下方,div.box2在上方。
    所以层叠顺序从下到上是:
    div.box1 -> div.child2 -> div.box2 -> div.child1
    这个例子体现了层叠上下文的独立性,以及z-index对层叠顺序的影响。

例子四

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.parent {width: 200px;height: 100px;background: #168bf5;/* 虽然设置了z-index，但是没有设置position，z-index无效，.parent还是普通元素，没有产生层叠上下文 */z-index: 1;}.child {width: 100px;height: 200px;background: #32d19c;position: relative;z-index: -1;}</style></head><body><div class="box"><div class="parent">parent<div class="child">child</div></div></div></body>
</html>

在这里插入图片描述
解析:

  1. div.box作为父容器,没有开启层叠上下文,作为背景显示。
  2. div.parent没有开启层叠上下文,是一个普通流块级元素,根据代码顺序在div.box之上。
  3. div.child是绝对定位的,z-index为-1,会创建层叠上下文,所以显示在普通流的div.parent之上。
  4. 即使div.parent设置了z-index为1,但没有position,所以z-index无效,div.parent不会创建层叠上下文。
  5. 如果div.box设置成flex布局,也会创建层叠上下文,层叠顺序就会改变。
    综合以上分析,层叠顺序从下到上为:
    div.box -> div.parent -> div.child
    这个例子展示了层叠上下文的形成条件,以及z-index的生效条件。

将父容器设置成flex布局
效果如下：

.box {display: flex;/* 此项设置会影响z-index */}

在这里插入图片描述
解析:

  1. div.child仍然是定位元素,创建了层叠上下文,显示在最上方。
  2. div.box作为弹性容器,根据规范会创建层叠上下文,并显示在普通流元素div.parent之上。
  3. 即使div.parent设置了z-index,但没有position定位,所以z-index无效。
  4. div.parent作为普通流元素,显示在最下方。
    综上,层叠顺序从上到下为:
    div.child -> div.box -> div.parent
    这个例子展示了弹性容器也会创建层叠上下文,从而影响内部元素的层叠顺序。
    所以理解哪些属性会创建层叠上下文非常重要,这决定了元素的显示堆叠顺序。

相关文章：

层叠上下文、层叠顺序

原文合集地址如下&#xff0c;有需要的朋友可以关注 本文地址 什么是层叠上下文 层叠上下文&#xff08;Stacking Context&#xff09;是指在 HTML 和 CSS 中&#xff0c;用于控制和管理元素层叠顺序以及呈现的一种机制。在一个网页中&#xff0c;许多元素&#xff08;例如文…...

编程日记 2023/8/27 18:15:37

postgres开发目录

目录 推荐 0.00001 Bruce的博客 0.00002 官方社区博客 0.00003 德哥的培训资料 0.00004 官方开发指南 0.00005 官方网站 0.00006 官方中国网站 0.00007 官方Wiki 0.00008 postgresql代码树 0.00009 gitee-学习资料1 0.00010 gitee-源码 安装与编译 1.00001git源码clone后进…...

编程日记 2023/8/27 18:14:36

计算机视觉入门 6） 数据集增强（Data Augmentation）

系列文章目录 计算机视觉入门 1&#xff09;卷积分类器计算机视觉入门 2&#xff09;卷积和ReLU计算机视觉入门 3&#xff09;最大池化计算机视觉入门 4&#xff09;滑动窗口计算机视觉入门 5&#xff09;自定义卷积网络计算机视觉入门 6&#xff09; 数据集增强&#xff08;D…...

编程日记 2023/8/27 18:13:33

Python分享之redis(2)

Hash 操作 redis中的Hash 在内存中类似于一个name对应一个dic来存储 hset(name, key, value) #name对应的hash中设置一个键值对&#xff08;不存在&#xff0c;则创建&#xff0c;否则&#xff0c;修改&#xff09; r.hset("dic_name","a1","aa&quo…...

编程日记 2023/8/27 18:12:32

springboot aop方式实现敏感数据自动加解密

一、前言 在实际项目开发中&#xff0c;可能会涉及到一些敏感信息&#xff0c;那么我们就需要对这些敏感信息进行加密处理&#xff0c; 也就是脱敏&#xff0c;比如像手机号、身份证号等信息。如果我们只是在接口返回后再去做替换处理&#xff0c;则代码会显得非常冗余&#xf…...

编程日记 2023/8/27 18:11:31

RabbitMQ---work消息模型

1、work消息模型 工作队列或者竞争消费者模式 在第一篇教程中&#xff0c;我们编写了一个程序&#xff0c;从一个命名队列中发送并接受消息。在这里&#xff0c;我们将创建一个工作队列&#xff0c;在多个工作者之间分配耗时任务。 工作队列&#xff0c;又称任务队列。主要思…...

编程日记 2023/8/27 18:10:29

GitRedisNginx合集

目录 文件传下载 Git常用命令 Git工作区中文件的状态 远程仓库操作 分支操作 标签操作 idea中使用git 设置git.exe路径 操作步骤 linux配置jdk 安装tomcat 查看是否启动成功 查看tomcat进程 防火墙操作 开放指定端口并立即生效 安装mysql 修改mysql密码 安装lrzsz软…...

编程日记 2023/8/27 18:09:28

系统架构设计师之缓存技术：Redis与Memcache能力比较

系统架构设计师之缓存技术&#xff1a;Redis与Memcache能力比较...

编程日记 2023/8/27 18:08:26

02.sqlite3学习——嵌入式数据库的基本要求和SQLite3的安装

目录 嵌入式数据库的基本要求和SQLite3的安装 嵌入式数据库的基本要求 常见嵌入式数据库 sqlite3简介 SQLite3编程接口模型 ubuntu 22.04下的SQLite安装 嵌入式数据库的基本要求和SQLite3的安装 嵌入式数据库的基本要求 常见嵌入式数据库 sqlite3简介 SQLite3编程接口模…...

编程日记 2023/8/27 18:07:24

AIGC ChatGPT 按年份进行动态选择的动态图表

动态可视化分析的好处与优势&#xff1a; 1. 提高信息理解性&#xff1a;可视化分析使得大量复杂的数据变得易于理解&#xff0c;通过图表、颜色、形状、尺寸等方式&#xff0c;能够直观地表现不同的数据关系和模式。 2. 加快决策速度&#xff1a;数据可视化可以帮助用户更快…...

编程日记 2023/8/27 18:06:23

分布式—雪花算法生成ID

一、简介 1、雪花算法的组成&#xff1a; 由64个Bit(比特)位组成的long类型的数字 0 | 0000000000 0000000000 0000000000 000000000 | 00000 | 00000 | 000000000000 1个bit&#xff1a;符号位&#xff0c;始终为0。 41个bit&#xff1a;时间戳&#xff0c;精确到毫秒级别&a…...

编程日记 2023/8/27 18:05:20

Python语言实现React框架

迷途小书童的 Note 读完需要 6分钟 速读仅需 2 分钟 1 reactpy 介绍 reactpy 是一个用 Python 语言实现的 ReactJS 框架。它可以让我们使用 Python 的方式来编写 React 的组件&#xff0c;构建用户界面。 reactpy 的目标是想要将 React 的优秀特性带入 Python 领域&#xff0c;…...

编程日记 2023/8/27 18:04:19

Netty入门学习和技术实践

Netty入门学习和技术实践 Netty1.Netty简介2.IO模型3.Netty框架介绍4. Netty实战项目学习5. Netty实际应用场景6.扩展 Netty 1.Netty简介 Netty是由JBOSS提供的一个java开源框架&#xff0c;现为 Github上的独立项目。Netty提供异步的、事件驱动的网络应用程序框架和工具&…...

编程日记 2023/8/27 18:03:18

MySQL详细安装与配置

免安装版的Mysql MySQL关是一种关系数据库管理系统&#xff0c;所使用的 SQL 语言是用于访问数据库的最常用的 标准化语言&#xff0c;其特点为体积小、速度快、总体拥有成本低&#xff0c;尤其是开放源码这一特点&#xff0c;在 Web 应用方面 MySQL 是最好的 RDBMS(Relation…...

编程日记 2023/8/27 18:02:16

裸露土堆识别算法

裸露土堆识别算法首先利用图像处理技术&#xff0c;提取出图像中的土堆区域。裸露土堆识别算法首通过计算土堆中被绿色防尘网覆盖的比例&#xff0c;判断土堆是否裸露。若超过40%的土堆没有被绿色防尘网覆盖&#xff0c;则视为裸露土堆。当我们谈起计算机视觉时&#xff0c;首先…...

编程日记 2023/8/27 18:01:14

说说你对Redux的理解？其工作原理？

文章目录 redux&#xff1f;工作原理如何使用后言 redux&#xff1f; React是用于构建用户界面的&#xff0c;帮助我们解决渲染DOM的过程 而在整个应用中会存在很多个组件&#xff0c;每个组件的state是由自身进行管理&#xff0c;包括组件定义自身的state、组件之间的通信通…...

编程日记 2023/8/27 18:00:13

《基于 Vue 组件库 的 Webpack5 配置》7.路径别名 resolve.alias 和 性能 performance

路径别名 resolve.alias const path require(path);module.exports {resolve: {alias: {"": path.resolve(__dirname, "./src/"),"assets": path.resolve(__dirname, "./src/assets/"),"mixins": path.resolve(__dirname,…...

编程日记 2023/8/27 17:59:12

基于PaddleOCR2.7.0发布WebRest服务测试案例

基于PaddleOCR2.7.0发布WebRest服务测试案例 #WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. #警告&#xff1a;这是一个开发服务器。不要在生产部署中使用它。请改用生产WSGI服务器。 输出结果…...

编程日记 2023/8/27 17:58:11

Solidity 合约安全，常见漏洞 （下篇）

Solidity 合约安全&#xff0c;常见漏洞 &#xff08;下篇&#xff09; Solidity 合约安全&#xff0c;常见漏洞 &#xff08;上篇&#xff09; 不安全的随机数 目前不可能用区块链上的单一交易安全地产生随机数。区块链需要是完全确定的&#xff0c;否则分布式节点将无法达…...

编程日记 2023/8/27 17:57:10

nodejs根据pdf模板填入中文数据并生成新的pdf文件

导入pdf-lib库和fontkit npm install pdf-lib fs npm install pdf-lib/fontkit 具体代码 const { PDFDocument, StandardFonts } require(pdf-lib); const fs require(fs); const fontkit require(pdf-lib/fontkit) let pdfDoc let font async function fillPdfForm(temp…...

编程日记 2023/8/27 17:56:08

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/6/15 22:22:18

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/7/6 1:00:14

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2025/7/1 8:52:28

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/7/6 2:38:22

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/7/6 14:14:15

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/7/4 15:57:09

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/7/5 13:50:27

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/7/6 2:05:17

Python爬虫实战：研究Restkit库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的有价值数据。如何高效地采集这些数据并将其应用于实际业务中，成为了许多企业和开发者关注的焦点。网络爬虫技术作为一种自动化的数据采集工具，可以帮助我们从网页中提取所需的信息。而 RESTful API …...

编程新知 2025/6/21 5:02:42

【Redis】Redis从入门到实战：全面指南

Redis从入门到实战：全面指南 一、Redis简介 Redis（Remote Dictionary Server）是一个开源的、基于内存的键值存储系统，它可以用作数据库、缓存和消息代理。由Salvatore Sanfilippo于2009年开发，因其高性能、丰富的数据结构和广泛的语言支持而广受欢迎。 Redis核心特点：…...

编程新知 2025/7/6 2:39:48