CSS专题之层叠上下文

news2025/6/2 10:23:51

前言

石匠敲击石头的第 15 次

在平常开发的时候，有时候会遇到使用 z-index 调整元素层级没有效果的情况，究其原因还是因为对层叠上下文不太了解，看了网上很多前辈的文章，决定打算写一篇文章来梳理一下，如果哪里写的有问题欢迎指出，不胜感激。

什么是层叠上下文

层叠上下文（Stacking Context）是 HTML 中的三维概念，它决定了元素在 Z 轴（垂直于电脑屏幕的方向） 上的显示顺序。简单来说，层叠上下文是浏览器用来组织元素 Z 轴方向堆叠顺序的一个独立的 “视觉区域” 或 “作用域”。

在这里插入图片描述

层叠上下文的概念有点类似于块级格式化上下文（BFC），都是在特定条件下由元素创建的独立作用区域，并且区域内遵循各自的规则，但它作用在视觉层级（z-index）而非布局流。

什么是层叠水平

在一个层叠上下文中，层叠水平（Stacking Level，也叫层叠等级） 用于确定其子元素在 Z 轴方向上的显示优先级，简单来说，层叠水平决定了同一层叠上下文内的元素谁在上、谁在下。

⚠️ 注意：

  • 元素的层叠水平是由其所属的层叠上下文来决定的，也就是说层叠水平的比较只有在同一个层叠上下文中才有意义，所以不同层叠上下文之间的元素不会互相影响
  • 某些情况下（Flex 子元素和定位元素） z-index 确实可以影响元素的层叠水平，但层叠水平不等于 z-index，所有元素都有层叠水平

什么是层叠顺序

层叠上下文和层叠顺序这两个终究只是抽象的概念，但元素具体是按照什么规则层叠的，这就不得不提层叠顺序（Stacking Order）。

简单来说，层叠顺序就是指当多个元素在 Z 轴方向发生重叠时，浏览器决定哪些元素显示在上、哪些元素被遮挡的一套规则。

在这里插入图片描述

上图展示了在不考虑 CSS3 新特性（如 flex、grid、isolation 等）的前提下，浏览器在同一层叠上下文中渲染元素的顺序，从下往上堆叠。

⚠️ 注意：

  • 左上角的层叠上下文 background / border 是指层叠上下文元素的边框和背景颜色，是最低的层叠等级

  • inline 和 inline-block 元素是相同的层叠等级，并且要高于 block 和 float 元素

  • 之所以文字相关元素（通常是 inline）层叠等级更高，是出于网页设计初衷：优先保障文字可见性，避免被大面积背景或容器遮挡

  • z-index: 0 和 z-index: auto 从层叠等级上看相同的，但实际上两个属性值有着根本的区别，具体区别可以看下表

    属性值是否创建层叠上下文说明
    z-index: auto不会创建新的层叠上下文元素仍处于父级的层叠上下文中
    z-index: 0会创建层叠上下文（前提是元素是定位元素）position 为 relative、absolute、fixed 或 sticky 时生效

层叠准则

知道了前面这些，我们还需要掌握：当多个元素发生重叠时，到底谁在上，谁在下？

其实只需要遵循这套判断准则就可以判断，为此我画了一张流程图：

在这里插入图片描述

⚠️ 注意：

  • 元素的层叠等级可以参考前面的 “层叠顺序图”，谁的层叠等级高，谁就显示在上方
  • 如果你发现调整 z-index 无效，极有可能是因为你正试图比较不在同一层叠上下文的元素

层叠上下文特性

跟 BFC 一样，层叠上下文也是一种独立作用域机制，具备以下特性：

  • 层叠上下文元素的层叠水平要比 普通元素（没有创建层叠上下文的元素） 高
  • 层叠上下文元素可以阻断元素的混合模式
  • 层叠上下文可以嵌套，内部层叠上下文元素及其所有子元素均受制于外部的层叠上下文
  • 层叠上下文是一个独立的渲染区域，其内部的层叠顺序只在自身作用范围内起作用
  • 层叠上下文元素不会和它同级的 “兄弟元素” 或 “兄弟上下文” 互相干扰彼此内部的层叠顺序

如何创建层叠上下文

前面说了那么多，那应该如何让一个元素变成层叠上下文元素呢？

大致有如下几种方式可以创建：

  • 根元素 <html> 本身就是一个层叠上下文元素，称为 “根层叠上下文”

  • 元素的 position 属性为非 static 值，并设置 z-index 属性值为非 auto 值，就可以创建层叠上下文

    ⚠️ 注意： 在早期版本的 Firefox 和 IE 浏览器中，使用 position: fixed 也需要显式设置 z-index 为非 auto 值才能触发层叠上下文的创建，但在现代浏览器中，position: fixed 本身就能自动创建层叠上下文，即使没有设置 z-index，这时元素的层叠等级在 “层叠顺序图” 的 z-index:0/auto 一级。

    在这里插入图片描述

  • z-index 值不为 auto 的 flex 子元素（父元素的 display 属性值为 flex 或者 inline-flex 的元素）

  • 元素的 opacity 值不为 1

  • 元素的 transform 值不为 none

  • 元素的 mix-blend-mode 值不为 normal

  • 元素的 filter 值不为 none

  • 元素的 isolation 值不为 isolate

  • 元素的 will-change 值为前面提到的任意一个属性（例如：will-change: opacity;）

  • 元素的 -webkit-overflow-scrolling 值为 touch

案例演示

正所谓实践出真知，接下来我们通过几个典型案例，来验证和巩固前面讲到的层叠上下文知识。

案例 1

.box {
  position: relative;
}

.a {
  position: absolute;
  background-color: blue;
  z-index: 1;
}

.b {
  position: absolute;
  background-color: green;
  z-index: 2;
}

.c {
  position: absolute;
  background-color: red;
  z-index: 3;
}

/* 其它样式... */

<div class="box">
  <div class="item a">a</div>
  <div class="item b">b</div>
</div>
<div class="box">
  <div class="item c">c</div>
</div>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在线预览效果

上面这段代码中大家可以先想一下 a、b、c 元素它们的层叠上下文分别是由哪个元素创建的？

答案是：

  • a、b、c 三个元素的父元素 .box 虽然设置了 position: relative;，但没有设置 z-index，所以不会产生层叠上下文，所以三个元素就都处于 <html> 标签产生的 “根层叠上下文” 中
  • 所以在同一层叠上下文中 c 元素的 z-index 值最大，自然就出现在最前面

案例 2

.box1 {
  position: relative;
  z-index: 2;
}

.box2 {
  position: relative;
  z-index: 1;
}

.a {
  position: absolute;
  background-color: blue;
  z-index: 1;
}
.b {
  position: absolute;
  background-color: green;
  z-index: 2;
}
.c {
  position: absolute;
  background-color: red;
  z-index: 3;
}

/* 其它样式... */

<div class="box1">
  <div class="item a">a</div>
  <div class="item b">b</div>
</div>
<div class="box2">
  <div class="item c">c</div>
</div>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在线预览效果

上述代码的主要结构跟案例 1 类似，只是对 a、b、c 三个元素的父元素增加了 z-index，使之产生层叠上下文。

大家可以想一下，为什么明明 c 元素的 z-index 值最大，却被比它小的 a、b 元素给盖住？

答案是：

  • a、b 元素在同一个层叠上下文中，而 c 元素单独在另外一个层叠上下文中

  • 此时根据层叠准则，会进行 “所属的层叠上下文” 的层叠等级比较

    • a、b 元素 “所属的层叠上下文” 元素 box1 的 z-index 为2
    • c 元素 “所属的层叠上下文” 元素 box2 的 z-index 为 1

    所以 c 元素被 a、b 元素盖住

  • a、b 元素因为是在同一个层叠上下文中，它们之间比较则是根据自身的 z-index 值，b 元素的值比 a 元素的大，所以 b 元素盖住了 a 元素

案例 3

在过去 CSS 2.1 的时代，z-index 通常必须和定位元素一起使用才有效果，但现在 CSS3 中非定位元素也可以使用 z-index。

.container {
  display: flex;
}

.box1 {
  background-color: skyblue;
  width: 100px;
  height: 100px;
  margin: 20px;
  z-index: 2;
}

.box2 {
  background-color: tomato;
  width: 150px;
  height: 150px;
  margin: 30px 0 0 -80px;
  z-index: 1;
}

/* 其它样式... */

<div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在线预览效果

我们可以看到 box2 元素被 box1 元素所盖住，所以我们在使用 Flex 布局的时候，可以无需将 Flex 子元素设置为定位元素就可以使用 z-index。

⚠️ 注意：

  • 由于 .box1 和 .box2 是 flex 子元素，并且都设置了 z-index，此时它们都是层叠上下文元素，同时 z-index 生效
  • .box 和 .box2 在同一个层叠上下文中，因为父元素 .container 不是层叠上下文元素，所以都处于 <html> 标签产生的 “根层叠上下文” 中

总结

  • 层叠上下文是浏览器用来组织元素 Z 轴方向堆叠顺序的一个独立的 “视觉区域” 或 “作用域”
  • 层叠水平决定了同一层叠上下文内的元素谁在上、谁在下
  • 层叠上下文和层叠顺序这两个是概念，而层叠顺序是指当多个元素在 Z 轴方向发生重叠时，浏览器决定哪些元素显示在上、哪些元素被遮挡的一套规则
  • 在遇到需要判断多个元素重叠时，可以参考层叠准则中的流程图来判断谁在上，谁在下
  • 创建层叠上下文的方式有很多，并非只有定位元素 + z-index 可以创建

参考文章

  • 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index最近，在项目中遇到一个关于CSS中元素z-index属性的问 - 掘金
  • 深入理解CSS中的层叠上下文和层叠顺序 « 张鑫旭-鑫空间-鑫生活

博客地址：https://github.com/wjw020206/blog

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Nginx基础篇（Nginx目录结构分析、Nginx的启用方式和停止方式、Nginx配置文件nginx.conf文件的结构、Nginx基础配置实战）

Nginx基础篇（Nginx目录结构分析、Nginx的启用方式和停止方式、Nginx配置文件nginx.conf文件的结构、Nginx基础配置实战）

文章目录 1. Nginx目录结构分析1.1 conf目录1.2 html目录1.3 logs目录1.4 sbin目录 2. Nginx的启用方式和停止方式2.1 信号控制2.1.1 信号2.1.2 调用命令 2.2 命令行控制2.2.1 基础操作类2.2.2 配置测试类2.2.3 进程控制类2.2.4 路径与文件类2.2.5 高级配置类 3. Nginx配置文件…
阅读更多...
Kafka 的 ISR 机制深度解析：保障数据可靠性的核心防线

Kafka 的 ISR 机制深度解析：保障数据可靠性的核心防线

在 Kafka 的消息处理体系中&#xff0c;数据的可靠性和高可用性是至关重要的目标。而 ISR&#xff08;In-Sync Replicas&#xff0c;同步副本&#xff09;机制作为 Kafka 实现这一目标的关键技术&#xff0c;在消息复制、故障容错等方面发挥着核心作用。接下来&#xff0c;我们…
阅读更多...
移动安全Android——客户端静态安全

移动安全Android——客户端静态安全

一、反编译保护 测试工具 Jadx GitHub - skylot/jadx: Dex to Java decompiler PKID [下载]PKID-APP查壳工具-Android安全-看雪-安全社区|安全招聘|kanxue.com 测试流程 &#xff08;1&#xff09;通过Jadx对客户端APK文件进行反编译&#xff0c;观察是否进行代码混淆 &…
阅读更多...
Redis最佳实践——安全与稳定性保障之连接池管理详解

Redis最佳实践——安全与稳定性保障之连接池管理详解

Redis 在电商应用的连接池管理全面详解 一、连接池核心原理与架构 1. 连接池工作模型 #mermaid-svg-G7I3ukCljlJZAXaA {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-G7I3ukCljlJZAXaA .error-icon{fill:#552222;}…
阅读更多...
核心机制三:连接管理(三次握手)

核心机制三:连接管理(三次握手)

核心机制一:确认应答 > 实现可靠传输的核心 接受方给发送方返回"应答报文"(ack) 1)发送方能够感知到对方是否收到 2)如果对方没有收到,发送方采取措施 序号按照字节编排 (连续递增) 确认序号按照收到数据的最后一个字节序号 1 核心机制二:超时重传 > 产生丢包…
阅读更多...
记录一次apisix上cros配置跨域失败的问题

记录一次apisix上cros配置跨域失败的问题

安全要求不允许跨域请求&#xff0c;但是业务侧由于涉及多个域名&#xff0c;并且需要共享cookie&#xff0c;所以需要配置跨域。 在apisix上配置了cors如下。 结果安全漏扫还是识别到了跨域请求的漏洞。 调试了cors.lua的插件脚本&#xff0c;发现apisix上是如果不在allowOri…
阅读更多...
服务器数据恢复—EMC存储raid5阵列故障导致上层应用崩了的数据恢复案例

服务器数据恢复—EMC存储raid5阵列故障导致上层应用崩了的数据恢复案例

服务器存储数据恢复环境&#xff1a; EMC某型号存储中有一组由8块硬盘组建的raid5磁盘阵列。 服务器存储故障&#xff1a; raid5阵列中有2块硬盘离线&#xff0c;存储不可用&#xff0c;上层应用崩了。 服务器存储数据恢复过程&#xff1a; 1、将存储中的所有硬盘编号后取出&a…
阅读更多...
如何保护网络免受零日漏洞攻击？

如何保护网络免受零日漏洞攻击？

零日漏洞&#xff08;Zero-Day Vulnerability&#xff09;是指软件或系统中尚未被厂商发现或修补的安全漏洞。这个名称中的“零日”意味着&#xff0c;从漏洞被发现到厂商发布修复补丁的时间是零天&#xff0c;也就是说&#xff0c;黑客可以利用这个漏洞进行攻击&#xff0c;而…
阅读更多...
Python打卡训练营-Day13-不平衡数据的处理

Python打卡训练营-Day13-不平衡数据的处理

浙大疏锦行 知识点&#xff1a; 不平衡数据集的处理策略&#xff1a;过采样、修改权重、修改阈值交叉验证代码 过采样 过采样一般包含2种做法&#xff1a;随机采样和SMOTE 过采样是把少的类别补充和多的类别一样多&#xff0c;欠采样是把多的类别减少和少的类别一样 一般都是缺…
阅读更多...
2.qml使用c++

2.qml使用c++

目录 1.概述2.注册方式3. 分类①枚举类②工具类③数据类④资源类②视图类 1.概述 qml是用来干嘛的&#xff1f; 当然是提高UI开发效率的 为什么要混合C&#xff1f; 因为qml无法处理密集型数据逻辑 而加入c则兼顾了性能 达到11>2 总结就是 qml 开发UI, C 实现逻辑 而js的用…
阅读更多...
c++5月31日笔记

c++5月31日笔记

题目&#xff1a;水龙头 时间限制&#xff1a;C/C 语言 1000MS&#xff1b;其他语言 3000MS 内存限制&#xff1a;C/C 语言 65536KB&#xff1b;其他语言 589824KB 题目描述&#xff1a; 小明在 0 时刻&#xff08;初始时刻&#xff09;将一个空桶放置在漏水的水龙头下。已知桶…
阅读更多...
Python打卡训练营Day41

Python打卡训练营Day41

DAY 41 简单CNN 知识回顾 数据增强卷积神经网络定义的写法batch归一化&#xff1a;调整一个批次的分布&#xff0c;常用与图像数据特征图&#xff1a;只有卷积操作输出的才叫特征图调度器&#xff1a;直接修改基础学习率 卷积操作常见流程如下&#xff1a; 1. 输入 → 卷积层 →…
阅读更多...
JAVA网络编程——socket套接字的介绍下(详细)

JAVA网络编程——socket套接字的介绍下(详细)

目录 前言 1.TCP 套接字编程 与 UDP 数据报套接字的区别 2.TCP流套接字编程 API 介绍 TCP回显式服务器 Scanner 的多种使用方式 PrintWriter 的多种使用方式 TCP客户端 3. TCP 服务器中引入多线程 结尾 前言 各位读者大家好,今天笔者继续更新socket套接字的下半部分…
阅读更多...
实验三 企业网络搭建及应用

实验三 企业网络搭建及应用

实验三 企业网络搭建及应用 一、实验目的 1.掌握企业网络组建方法。 2.掌握企业网中常用网络技术配置方法。 二、实验描述 某企业设有销售部、市场部、技术部和财务部四个部门。公司内部网络使用二层交换机作为用户的接入设备。为了使网络更加稳定可靠&#xff0c;公司决定…
阅读更多...
顶会新热门：机器学习可解释性

顶会新热门：机器学习可解释性

&#x1f9c0;机器学习模型的可解释性一直是研究的热点和挑战之一&#xff0c;同样也是近两年各大顶会的投稿热门。 &#x1f9c0;这是因为模型的决策过程不仅需要高准确性&#xff0c;还需要能被我们理解&#xff0c;不然我们很难将它迁移到其它的问题中&#xff0c;也很难进…
阅读更多...
《STL--stack 和 queue 的使用及其底层实现》

《STL--stack 和 queue 的使用及其底层实现》

引言&#xff1a; 上次我们学习了容器list的使用及其底层实现&#xff0c;相对来说是比较复杂的&#xff0c;今天我们要学习的适配器stack和queue与list相比就简单很多了&#xff0c;下面我们就开始今天的学习&#xff1a; 一&#xff1a;stack&#xff08;后进先出&#xff…
阅读更多...
基于springboot的医护人员排班系统设计与实现(源码+文档+部署讲解）

基于springboot的医护人员排班系统设计与实现(源码+文档+部署讲解）

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…
阅读更多...
CRISPR-Cas系统的小型化研究进展-文献精读137

CRISPR-Cas系统的小型化研究进展-文献精读137

Progress in the miniaturization of CRISPR-Cas systems CRISPR-Cas系统的小型化研究进展 摘要 CRISPR-Cas基因编辑技术由于其简便性和高效性&#xff0c;已被广泛应用于生物学、医学、农学等领域的基础与应用研究。目前广泛使用的Cas核酸酶均具有较大的分子量&#xff08;通…
阅读更多...
利用python工具you-get下载网页的视频文件

利用python工具you-get下载网页的视频文件

有时候我们可能在一个网站看到一个视频&#xff08;比如B站&#xff09;&#xff0c;想下载&#xff0c;但是页面没有下载视频的按钮。这时候&#xff0c;我们可以借助python工具you-get来实现下载功能。下面简要说下步骤 &#xff08;一&#xff09;因为使用的是python工具&a…
阅读更多...
【stm32开发板】单片机最小系统原理图设计

【stm32开发板】单片机最小系统原理图设计

一、批量添加网络标签 可以选择浮动工具中的N&#xff0c;单独为引脚添加网络标签。 当芯片引脚非常多的时候&#xff0c;选中芯片&#xff0c;右键选择扇出网络标签/非连接标识 按住ctrl键即可选中多个引脚 点击将引脚名称填入网络名 就完成了引脚标签的批量添加 二、电源引…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023