css--深入理解z-index引发的层叠上下文、层叠等级和层叠顺序
前言
在编写css样式代码的时候，我们经常会遇到z-index属性的使用，我们可能只了解z-index能够提高元素的层级，并不知道具体是怎么实现的。本文就来总结一个由z-index 引发的层叠上下文和层叠顺序相关知识点，有了这方面的了解，才能减少开发中遇到的bug，同时这也是面试中经常遇到的问题。
正文
1、z-index 属性
通常情况下，html 页面被认为是二维的，相当于只有 x 和 y 轴，因为文本、图像和其他元素被排列在页面上而不重叠。这种情况下只有一个渲染进程，所有元素都知道其他元素所占用的空间。z-index 属性可让你在渲染内容时调整对象分层的顺序。z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。这样似的html页面变成了一个三维的空间。
根据上面的理解，我们不难实现如下的效果：
代码段1如下：我们只需要改变box盒子的z-index值的大小就会改变盒子的层叠顺序。
<style>
div {
width: 100px;
height: 100px;
font-size: 14px;
}
.box1 {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
}
.box2 {
position: absolute;
top: 40px;
left: 40px;
background-color: yellow;
}
.box3 {
position: absolute;
top: 60px;
left: 60px;
background-color: green;
}
</style>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
初次看上面的代码，会发现 z-index 值越大在z轴上就越靠上，离浏览器屏幕越近。但是仔细思考，你会发现这里存在很多疑惑：z-index是在任何元素上面都有效果吗？难道z-index的值的大小直接影响到元素的层叠顺序吗？
我们再来看下下面的代码段2：
<style>
.box1,.box2 {
width: 100px;
height: 100px;
font-size: 14px;
display: flex;
}
.box1 {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 40px;
left: 40px;
background-color: yellow;
}
.box1-item1 {
width: 50px;
height: 100px;
border: 1px solid black;
}
.box1-item2 {
width: 50px;
height: 100px;
border: 1px solid blue;
}
.box2-item1 {
width: 50px;
height: 100px;
border: 1px solid black;
z-index: 10;
}
.box2-item2 {
width: 50px;
height: 100px;
border: 1px solid blue;
z-index: 10;
}
</style>
<body>
<div class="box1">
<div class="box1-item1">1</div>
<div class="box1-item2">2</div>
</div>
<div class="box2">
<div class="box2-item1">1</div>
<div class="box2-item2">2</div>
</div>
</body>
效果如下：
产生这样的效果，究竟是为什么呢，明明box2-item1、box2-item2 的z-index属性值更大，结果这两个盒子会被覆盖了呢。要想彻底知道其中的缘由，我们需要知道层叠上下、层叠等级、层叠顺序这几个概念。
2、层叠上下文
层叠上下文(Stacking context)，是html页面中的一个三维的概念，就是上面提到的 z-index 的产生，导致页面有了z轴。默认a-index值为 aotu ,即z轴的0点处，同时可以设置z-index为正值和负值，表示该层叠上下文元素在z轴距离屏幕的远近。
3、层叠等级
层叠等级（stacking level）,在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。只有在同一层叠上下文中，层叠等级才有意义，z-index优先级最高。产生层叠上下文的条件：
文档根元素（
<html>）；position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素；position值为fixed（固定定位）或sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；flex (
flexbox(en-US)) 容器的子元素，且z-index值不为auto；grid (
grid) 容器的子元素，且z-index值不为auto；opacity属性值小于1的元素（参见 the specification for opacity）；mix-blend-mode属性值不为normal的元素；以下任意属性值不为
none的元素：isolation属性值为isolate的元素；isolation属性值为isolate的元素；isolation属性值为isolate的元素transformfilterperspectiveclip-pathmask/mask-image/mask-border
-webkit-overflow-scrolling属性值为touch的元素；- isolation 属性值为 isolate 的元素；
will-change值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；contain属性值为layout、paint或包含它们其中之一的合成值（比如contain: strict、contain: content）的元素。
在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
总结:
- 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
- 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
- 每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
4、层叠顺序
层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。由此可见，前面所说的“层叠上下文”和“层叠等级”是一种概念，而这里的“层叠顺序”是一种规则。
5、分析代码段2
代码段2中，因为box1 和 box2 盒子都设置了position :absolute,并且box1设置了z-index:1，使得根层级上下文中 box1层级等级高于box2,因此产生了下图中左图的效果。在box1 盒子中设置flex，而两个子盒子box1-item1和box1-item2 默认的z-index值为auto，不会产生层级上下文关系，因此产生了下图中中间的效果图。在box2中设置了flex属性，而里面的 box2-item1 和 box2-item2 都设置了z-index值为10，产生了层级上下文，会高于box2 的Background 顺序显示，因此产生了下图中有图的效果。
写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
css--深入理解z-index引发的层叠上下文、层叠等级和层叠顺序的更多相关文章
- CSS深入理解之z-index
(http://www.imooc.com/learn/643) 一.z-index基础知识 1.z-index的含义 z-index属性指定了元素及其子元素的[z顺序],而[z顺序]可以决定当元 ...
- 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
- css深入理解z-index
z-index取值 z-index:auto;z-index:<integer>;z-index:inherit;继承 特性: 1.支持负值2.支持css3 animation动画;3.在 ...
- CSS深入理解学习笔记之z-index
1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...
- CSS基础：层叠顺序和层叠上下文
简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...
- 层叠上下文 Stacking Context
层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...
- z-index和层叠上下文
z-index基础介绍:三维坐标空间里,x轴通常用来表示水平位置,y轴来表示垂直位置,还有z轴来表示在纸面内外方向上的位置,像下面的图片一样: css允许的z-index的值是 ● auto (自动, ...
- 包含块、层叠上下文、BFC
包含块 什么是包含块?简单来说,就是决定一个元素大小和定位的元素.一个元素会为它的内部元素创建包含块,但也不能说元素的包含块就是它的父元素: 1.position:fixed 的元素 包含块是当前可视 ...
- CSS——关于z-index及层叠上下文（stacking context）
以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...
随机推荐
- 11 — springboot集成swagger — 更新完毕
1.前言 理论知识滤过,自行百度百科swagger是什么 2.导入依赖 <!-- swagger所需要的依赖--> <dependency> <groupId>io ...
- MYSQL获取更新行的主键ID 【转】
在某些情况下我们需要向数据表中更新一条记录的状态,然后再把它取出来,但这时如果你在更新前并没有一个确认惟一记录的主键就没有办法知道哪条记录被更新了. 举例说明下: 有一个发放新手卡的程序,设计数据库时 ...
- LeetCode1579题——圆圈中最后剩下的数字
1.题目描述:0,1,,n-1这n个数字排成一个圆圈,从数字0开始,每次从这个圆圈里删除第m个数字.求出这个圆圈里剩下的最后一个数字.例如,0.1.2.3.4这5个数字组成一个圆圈,从数字0开始每次删 ...
- C++中union相关
前两天做阿里笔试遇到一个选择题题目大概是 #include <iostream> #include <stdlib.h> using namespace std; union ...
- 机器学习常用python包
(py37) ai@ai:~$ pip freeze |grep -v '@' astor==0.8.1 certifi==2021.5.30 chardet==4.0.0 cycler==0.10. ...
- Web容器（tomcat服务器）处理JSP文件请求的三个阶段
Web容器(tomcat服务器)处理JSP文件请求的三个阶段 翻译:编写好的jsp文件被web容器中的jsp引擎转换成java源码. 编译:翻译成java源码的jsp文件会被编译成可被计算机执行的字节 ...
- 解放双手，自动生成“x.set(y.get)”，搞定vo2dto转换
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 给你机会,你也不中用啊 这些年从事编程开发以来,我好像发现了大部分研发那些不愿意干的 ...
- C++ happens-before 关系是不可传递的
P0668R4 对此进行了解释 The definition of plain happens-before became unpleasantly complicated with the intr ...
- UVA10079 Pizza Cutting 题解
Content 求用 \(n\) 条直线最多能将平面分成多少块区域. 多组输入,以一个负数结束. 数据范围:\(0\leqslant n\leqslant 2.1\times 10^8\). Solu ...
- LuoguP7784 [AC6-M15] “大吊灯”攻略作战 题解
Content 你要把 \(n\times m\) 的一个矩阵划分成若干个矩阵,使得对于每一个矩阵: 不存在两个矩阵合起来是一个矩阵. 划分的矩阵个数不超过 \(10\). 请给出一个划分方案,或者报 ...