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

层叠上下文、层叠顺序

news 2025/8/28 13:17:44

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

本文地址

什么是层叠上下文

层叠上下文（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

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/7/16 16:51:12

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/8/25 12:08:57

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/8/21 8:52:30

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/8/21 4:48:52

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/8/24 2:34:08

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/8/19 20:28:20

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/8/12 19:32:55

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/8/27 2:19:34

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/8/27 0:08:04