CSS中的层叠上下文

news2024/11/23 17:09:49

HTML 文档中的三维概念

平时我们从设备终端看到的 HTML 文档都是一个平面的,事实上 HTML 文档中的元素却是存在于三个维度中。除了大家熟悉的平面画布中的 x 轴和 y 轴,还有控制第三维度的 z 轴。

在这里插入图片描述

其中 x 轴通常用来表示水平位置,y 轴来表示垂直位置,z 轴表示屏幕内外方向上的位置。

在 CSS 中要确定沿着 z 轴排列元素,表示的是用户与屏幕的这条看不见的垂直线:

在这里插入图片描述

而这里我们要讨论的层叠上下文( stacking context ),就是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在 z 轴上就“高人一等”,最终表现就是它离屏幕观察者更近。

我想让一个元素更加靠前,我就给他创建一个层叠上下文。

具体的创建方法,一般来讲有 3 种方法:

  • HTML 中的根元素 HTML 本身就具有层叠上下文,称为“根层叠上下文”。
  • 普通元素设置 position 属性为非 static 值并设置 z-index 属性为具体数值,会产生层叠上下文。
  • CSS3 中的新属性也可以产生层叠上下文。
<div class="one"></div>
<div class="two"></div>
div{
  width: 200px;
  height: 200px;
}
.one{
  background-color: red;
}
.two{
  background-color: blue;
  margin-top: -100px;
}

在上面的代码中,我们创建了两个 div,然后使其产生重叠,默认情况下后来居上,蓝色的会盖住红色的。

在这里插入图片描述

下面我们给红色设置一个定位,如下:

...
.one{
  background-color: red;
  position: relative;
  z-index: 1;
}
...

由于设置了定位和 z-index 属性,所以红色的 div 就会创建一个层叠上下文,在 z 轴上就“高人一等”。

在这里插入图片描述
感觉很简单的样子。

还没结束…
在这里插入图片描述

层叠等级与层叠顺序

除了层叠上下文,我们还需要了解两个概念:

  • 层叠等级( stacking level
  • 层叠顺序( stacking order

这两个东西实际上都是用来表述:

在同一个层叠上下文中,元素在 z 轴上的显示顺序。

只不过前一个是概念,后一个是具体规则。

如果两个元素在同一个层叠上下文中,那么层叠等级越大的元素,就越靠前。

那么问题来了,我怎么知道该元素的层叠等级是高还是低?

所以层叠等级的高低规则是由层叠顺序来体现的。

CSS2.1 的年代(注意这里的前提),层叠顺序规则遵循下面这张图:

在这里插入图片描述

那么如果两个元素不在同一个层叠下上文中呢?

那么此时就先比较他们所处的层叠上下文的层叠等级,也就是所谓的“从父”现象。

总结:

  1. 首先先看要比较的两个元素是否处于同一个层叠上下文中:

    • 如果是,谁的层叠等级大,谁在上面(判断层叠等级大小参阅上面的“层叠顺序”图)

    • 如果两个元素不在同一层叠上下文中,请先比较他们所处的层叠上下文的层叠等级。

  2. 当两个元素层叠等级相同、层叠顺序相同时,在 DOM 结构中后面的元素层叠等级在前面元素之上。

示例 1:

<div class="one">
  <div class="item" style="background-color: black; z-index: 99;"></div>
</div>
<div class="two">
  <div class="item" style="background-color: pink;top: 50px; z-index: 1;"></div>
</div>
div{
  width: 200px;
  height: 200px;
}
.one{
  background-color: red;
  position: relative;
  z-index: 1;
}
.two{
  background-color: blue;
  position: relative;
  z-index: 2;
}
.item{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 200px;
  top: 200px;
}

在这里插入图片描述

在上面的代码中,onetwo 分别有自己的层叠上下文,但是 two 的层叠等级要比 one 高,之后我们可以看到,无论 one 中的子元素的 z-index 设置有多高,它始终被 two 的子元素给覆盖,因为如果两个元素不在同一层叠上下文中,比较的是所在层叠上下文的等级。

示例 2:

<div class="box1">
  <div class="child1"></div>
</div>

<div class="box2">
  <div class="child2"></div>
</div>
.box1,
.box2 {
  position: relative;
}

.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;
}

在这里插入图片描述
在上面的示例中,.box1/.box2 虽然设置了 position: relative,但是在没有设置 z-index。所以 .box1/.box2 仍然是普通元素,所以 child1/.child2 属于 html 元素的“根层叠上下文”中,也就是处于同一个层叠上下文中,根据层叠顺序谁的 z-index 值大,谁在上面。

示例 3:

将上面案例中的 CSS 代码稍作修改,如下:

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

在这里插入图片描述
此时,我们发现,仅仅修改了 .box1/.box2z-index 属性值改为数值 0,最终结果完全相反。

这时 .child2 覆盖在了 .child1 上面。原因是什么呢?

很简单:因为设置 z-index: 0 后,.box1/.box2 产生了各自的层叠上下文,这时候要比较 .child1/.child2 的层叠关系属于不同的层叠上下文进行比较,此时由由各自所在的 .box1/.box2 的层叠等级来决定。

但是 .box1/.box2z-index 值都为 0,都是块级元素(所以它们的层叠等级,层叠顺序是相同的),这种情况下,在 DOM 结构中后面的覆盖前面的,所以 .child2 就在上面。

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

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

相关文章

力扣刷题Day2

题目链接&#xff1a; 24. 两两交换链表中的节点 - 力扣&#xff08;LeetCode&#xff09; 效果&#xff1a; 解题思路&#xff1a; 给定一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后的链表。 注意不可以只是单纯的改变节点内部的值&#xff0c;而…

面试:MYSQL(SQL优化、MYSQL事务)

目录 一、SQL优化 1、如何定位慢查询 &#xff08;1&#xff09;方案一&#xff1a;开源工具 &#xff08;2&#xff09;方案二&#xff1a;慢日志查询 2、定位到慢查询时&#xff0c;如何优化 3、什么是索引 &#xff08;1&#xff09;底层结构 4、聚簇索引&#xff0…

linux学习:线程安全(信号量+互斥锁读写锁+条件变量+可重入函数)

目录 信号量 有名信号量 步骤 api 创建、打开一个POSIX有名信号量 对 POSIX 有名信号量进行 P、V 操作 关闭、删除 POSIX 有名信号量 例子 无名信号量 步骤 api 初始化、销毁 POSIX 无名信号量 互斥锁读写锁 例子 两条线程 使用互斥锁来互斥地访问标准输出 在加锁…

UE Snap03 启动参数设置

UE Snap03 启动参数设置 UE打包后传入自定义参数及解析。 void UGameInstance::StartGameInstance() {Super::StartGameInstance();UE_LOG(LogTemp, Warning, TEXT("--StartGameInstance--"));FString param;FParse::Value(FCommandLine::Get(), TEXT("-UserN…

# 谷歌 Chrome 浏览器无法安装插件的解决方法

谷歌 Chrome 浏览器无法安装插件的解决方法 运用开发模式安装 安装步骤&#xff1a; 1、 将 XX.crx 插件的扩展名改成 .zip 或者 .rar 并解压到文件夹 XX 目录。 1&#xff09;如&#xff1a;下载的 前端框架 vue.js 插件 nhdogjmejiglipccpnnnanhbledajbpd-6.6.1-Crx4Chro…

Isaac Sim 2 (学习笔记4.26)

今天一整天都要开会&#xff0c;闲的无聊&#xff0c;把这周学的东西简单整理下。纯英文文档想不起来东西的时候总是找不到位置...持续更新一整天 1.将块与块连接起来 尝试连接块与块的时候发现只能是cube、mesh连接&#xff0c;如果是一整个的包括坐标系、材质包等等&#xf…

阿里云服务器购买和设置

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;服务器❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 1、搜索阿里云网址&#xff1a; 2、点击产品&#xff0c;选择云服务器ECS 3、选择立即购买 4、选…

C# Web控件与数据感应之 Control 类

目录 关于数据感应 Control 类 范例运行环境 simpleDataListEx方法 设计 实现 调用示例 数据源 调用 小结 关于数据感应 数据感应也即数据捆绑&#xff0c;是一种动态的&#xff0c;Web控件与数据源之间的交互&#xff0c;诸如 ListControl 类类型控件&#xff0c;在…

uni-app - 使用地图功能打包安卓apk的完美流程以及重要的注意事项(带您一次打包成功)

在移动应用开发中&#xff0c;地图功能是一个非常常见且实用的功能&#xff0c;可以帮助用户快速定位并浏览周边信息。而在uni-app开发中&#xff0c;使用地图功能也是一项必备技能。本文将介绍uni-app使用地图功能打包安卓apk的注意事项&#xff0c;帮助开发者顺利完成地图功能…

万兆以太网MAC设计(12)万兆UDP协议栈上板与主机网卡通信

文章目录 一、设置IP以及MAC二、上板效果2.1、板卡与主机数据回环测试2.2、板卡满带宽发送数据 一、设置IP以及MAC 顶层模块设置源MAC地址 module XC7Z100_Top#(parameter P_SRC_MAC 48h01_02_03_04_05_06,parameter P_DST_MAC 48hff_ff_ff_ff_ff_ff )(input …

excel图表如何忽略空值呢?

在excel柱形图和折线图中有多余的空值&#xff0c;如何不把空值当成0值处理&#xff0c;可以达到第二个图的效果? 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 用的excel2019已经是自动将这些空值忽略了&#xff0c;在低版本上&#xff0c;是会将空值…

2024年想创业做电商,视频号小店绝对是最明智的选择!

大家好&#xff0c;我是电商糖果 在电商行业摸爬滚打了七年时间了&#xff0c;做过天猫&#xff0c;京东&#xff0c;闲鱼。 目前在做的项目只有两个&#xff0c;一个是抖音小店&#xff0c;已经做了四年多了。 另一个就是视频号小店&#xff0c;现在做了有一年多了。 视频…

力扣HOT100 - 79. 单词搜索

解题思路&#xff1a; 深度优先搜索&#xff08;DFS&#xff09; 剪枝。 class Solution {public boolean exist(char[][] board, String word) {char[] words word.toCharArray();for(int i 0; i < board.length; i) {for(int j 0; j < board[0].length; j) {if (df…

docker compose安装redis

一、安装准备 在docker hub查看redis镜像版本。查看地址如下&#xff1a; Dockerhttps://hub-stage.docker.com/_/redis/tags 二、拉取docker镜像 我这里用redis:6.2.14版本&#xff0c;先拉取镜像。命令如下&#xff1a; docker pull redis:6.2.14 查看刚刚下载的镜像&am…

冯喜运:4.30现货黄金涨跌互现,最新黄金原油趋势分析

【黄金消息面分析】&#xff1a;上周五公布的数据&#xff0c;美国3月核心PCE年率维持前值不变&#xff0c;美国4月一年期通胀率预期上升&#xff0c;显示通胀顽固并有所回升&#xff0c;但其经济数据美国3月个人支出月率和美国4月密歇根大学消费者信心指数终值则低于预期和前值…

ABeam德硕受邀参加第四届碳交易与ESG投资合作发展大会并荣获2024 ESG“前沿奖”

ABeam荣获2024 ESG“前沿奖”&#xff0c;ABeam大中华区董事长兼总经理中野洋辅先生上台领奖 ABeam ESG News 3月28日&#xff0c;由中国金融前沿论坛&#xff08;CFAF&#xff09;主办&#xff0c;ABeam Consulting、MSCI、BCG、中金公司、方达律师事务所等合作协办的第四届…

Java包装类,128陷阱

包装类 基本数据类型都有自己对应的包装类&#xff0c;因为Java本质是面向对象编程的&#xff0c;一切的内容在Java看来都是对象 但是基本数据类型没有类&#xff0c;也没有对象&#xff0c;这样就有了矛盾 所以诞生了基本类型的包装类 基本数据类型&#xff1a; byte,short,…

Spring AI 来啦,快速上手

Spring AI Spring框架在软件开发领域&#xff0c;特别是在Java企业级应用中&#xff0c;一直扮演着举足轻重的角色。它以其强大的功能和灵活的架构&#xff0c;帮助开发者高效构建复杂的应用程序。而Spring Boot的推出&#xff0c;更是简化了新Spring应用的初始搭建和开发过程…

(超全)python图像处理详细解析(1)

图像处理 skimage包的子模块1.读取图像2.图像灰度处理3.加载程序自带图像4.查看存储路径5.保存图片6.图片信息7.输出小猫图片的G通道中的第20行30行列的像素值8.显示红色单通道图片9.对小猫图片添加椒盐噪声10.高斯去噪11.中值滤波去噪12.随机生成噪声点13.对小猫图像进行裁剪1…

vue报错:Do not mutate vuex store state outside mutation handlers.

vue报错&#xff1a;Do not mutate vuex store state outside mutation handlers. 原因&#xff1a;在vuex store的state外部直接修改了state的值&#xff0c;但是Vuex要求所有的state的修改必须在vuex中&#xff0c;不允许直接咋组件中修改store中的状态&#xff0c;除非通过m…