CSS层叠上下文、层叠顺序和层叠等级
0 前言
在讨论层叠上下文和层叠顺序之前先举个例子，创建两个box，其中红色box长200px宽400px，蓝色box长400px宽200px：
<div class="box"><div class="blue-box"></div></div><div class="box"><div class="red-box"></div></div>
.box {position: relative;z-index: auto; /* 默认值 */
}.blue-box {width: 400px;height: 200px;background: blue;position: absolute;
}.red-box {width: 200px;height: 400px;background: red;position: absolute;
}
效果如下：
在此引出两个问题：
- 为什么
red-box在blue-box之上？ - 怎么让
blue-box在red-box之上？
1 层叠上下文
1.1 层叠上下文的概念
之所以元素在浏览器中有显示上下之分，是因为浏览器将页面构想成一个3D的坐标轴，而屏幕的正面即为坐标轴的z轴，如图所示：
每个页面都有一个默认的层叠上下文，根元素html就是一个层叠上下文，而且其中还可能含有其他的层叠上下文，在同一个层叠上下文中，元素出现的上下顺序叫做层叠等级，决定层叠等级的规则叫做层叠顺序。
前面提到根元素html就是一个层叠上下文，并且还可以在其中创建其他层叠上下文，在CSS中每个层叠上下文的层叠层都是独立的，不受其他层叠上下文的影响，如下图所示，跟元素html之中又有三个独立的层叠上下文，三个独立的层叠上下文中各自有自己的层叠层：
1.2 创建层叠上下文的方法
满足以下任意一种情况即可创建一个层叠上下文：
- 根元素html（属于被动创建层叠上下文）
- position值为非static且z-index值不为auto。
- 弹性盒模型flex中的元素，且z-index值不为auto。
- opacity属性值小于1的元素。
- …
以上列举的是常见的方法，更多方法可查阅文档MDN-层叠上下文。
2 层叠等级
层叠等级决定了同一个层叠上下文中的层叠顺序，并且元素的层叠等级只有在同一个层叠上下文中比较才有意义，如1.1节中三个独立层叠上下文内的A、B、C三个元素，因为这三个元素属于不同的层叠上下文，所以各自拥有独立的层叠顺序，所以将其比较是没有意义的。
在1.1节中的例子里，A、B、C三个元素是没有发生位置重叠的，若此时三个元素发生了位置重叠，如下图所示：
在进行比较时，由于三个元素属于不同的层叠上下文，所以就要找对应父级元素所在的上下文，即要确定red、green、blue三个层叠上下文的层叠等级，因为这red、green、blue都属于根元素html的层叠上下文中，所以能够进行比较，最终根据父级元素的层叠等级来确定三个子元素A、B、C的显示顺序。
3 被误解的z-index
举个例子如下图所示，red在green和blue之下，所以元素A也在B和C之下，那么怎么让A显示在最上面呢？
相信有人给定会给出答案：给元素A设置CSS样式：z-index: 9999;这样元素A就显示在所有元素之上了。其实这种说法是错误的，这也是很多人对于z-index的误解。
确实，当需要指定不同的排列顺序时，只要给元素指定一个z-index数值，该数值必须是一个整数（正整数和负整数），这个数值表示了元素在z轴的位置，数值越大，元素越在z轴的最上方。但是，z-index的使用是有先决条件的：
z-index只适用于定位的元素，对非定位元素无效，如果一个元素没有指定z-index，那么其默认值是auto（z-index的0层）。- 元素的
z-index值只有在同一个层叠上下文中才有意义。
根据第两个先决条件可知，由于元素A、B、C不属于同一个层叠上下文，所以即使给元素A设置CSS样式：z-index: 9999;也无法将A元素置于所有元素之上。
4 层叠顺序
当元素发生重叠时，下图描述了7种元素类型对应的层叠顺序：
图中的顺序很好理解，但是有几点值得注意：
- 内联元素（
inline/inline-block）的层叠顺序高于浮动float元素和块级block元素：这个容易理解，网页的重点是显示内容，如内联元素span用于定义文本块，内联元素img用于显示图片，所以理所当然的使这类表示内容的内联元素拥有更高的层叠顺序。 - 浮动
float元素的层叠顺序高于块级block元素。 - 虽说
z-index:auto和z-index:0在同一层叠顺序，但是两者有着重要的区别：参照1.2节中创建层叠上下文的方法，z-index:auto是不会创建一个新的层叠上下文的，而z-index:0能够创建一个新的层叠上下文。
另外可以通过下面的图片对层叠顺序进行记忆：
除去z-index相关的层叠顺序，由表示内容的内联元素层叠顺序最高，其次是表示内容布局的浮动元素和块级元素，最后是用于装饰内容的层叠上下文的背景和边框。
5 判断层叠顺序的方法
- 在同一个层叠上下文中，其内部元素的层叠顺序按照第4章中的层叠顺序图来排列。
- 在同一个层叠上下文中，若两个元素的层叠顺序相同，则后面的元素会在前面的元素之上。
- 在不同层叠上下文的情况下比较两个元素的层叠顺序，需要向上查询其父元素所在的层叠上下文，直到两者的某一级父元素在同一层，再比较这两个父级元素的层叠顺序。
6 前言中的问题
前言中留下了两个问题：
- 为什么
red-box在blue-box之上？
a. 首先判断两个两个box是否在同一个层叠上下文中，由于red-box和blue-box都拥有一个父元素box，父元素box中含有非static定位属性，但是z-index为auto，所以父元素box并没有形成单独的层叠上下文，所以这两个box同属于根元素html的层叠上下文中，因此red-box和blue-box也属于同一个层叠上下文。
b. 此时再判断red-box和blue-box的层叠顺序，由于red-box和blue-box属于同种类型的元素，两者拥有相同的层叠顺序，所以后出现的red-box会位于blue-box之上。 - 怎么让
blue-box在red-box之上？
（1）方案一：根据对于问题1的分析，可以将red-box和blue-box互换位置，如下代码，这样blue-box就成为了后出现的元素：
<div class="box"><div class="red-box"></div>
</div>
<div class="box"><div class="blue-box"></div>
</div>
（2）方案二：由于red-box和blue-box属于同一个层叠上下文，所以可以通过z-index属性将blue-box置于red-box之上，如下代码，给blue-box添加z-index: 2，给red-box添加z-index: 1：
.blue-box {width: 400px;height: 200px;background: blue;position: absolute;z-index: 2; /* 添加z-index */
}.red-box {width: 200px;height: 400px;background: red;position: absolute;z-index: 1; /* 添加z-index */
}
（3）方案三：方案一和方案二都是在同一个层叠上下文的条件下，方案三将red-box和blue-box置于两个不同的层叠上下文，修改代码如下：
<div class="box1"><div class="blue-box"></div>
</div>
<div class="box2"><div class="red-box"></div>
</div>
通过将父级box1和box2的z-index修改为0而创建了两个单独的层叠上下文。
.box1, .box2 {position: relative;z-index: 0; /* 创建层叠上下文 */
}.blue-box {width: 400px;height: 200px;background: blue;position: absolute;z-index: 2;
}.red-box {width: 200px;height: 400px;background: red;position: absolute;z-index: 1;
}
注意：此时red-box和blue-box的z-index还保留了，效果如图：
可以发现red-box和blue-box的z-index失效了，即使blue-box的z-index比red-box大也无济于事，这也正好验证了关键结论“元素的z-index值只有在同一个层叠上下文中才有意义”。这里之所以red-box还在blue-box之上是因为其父级box在根元素html层叠上下文中的层叠顺序。
所以在这个例子中，想要实现blue-box在red-box之上，需要通过z-index修改box1和box2的层叠顺序：
.box1 {position: relative;z-index: 1;}.box2 {position: relative;z-index: 0;}
效果如下：
7 总结
在实际开发中，需要牢记的内容有：
- 创建层叠上下文的方法：MDN-层叠上下文
z-index的使用条件：必须是定位元素且比较z-index的元素在同一个层叠上下文，参阅第3章内容。- 层叠顺序：可以按照如下方法记忆（由高到低）：
a. 正z-index
b. 默认值z-index:auto、z-index:0（注意两者区别，参阅第4章内容）
c. 表示内容的inline/inline-block
d. 表示布局的float浮动元素和block块级元素
e. 负z-index
f. 表示装饰的层叠上下文的背景和边框 - 判断层叠顺序的方法，参阅第5章内容。
CSS层叠上下文、层叠顺序和层叠等级相关推荐
- vb6 combo根据index显示_彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
- 层叠上下文-《CSS 世界》阅读笔记
层叠规则 目录 层叠规则 目录 z-index 什么是层叠上下文 什么是层叠水平 层叠顺序 层叠准则 层叠上下文的特性 笔者个人理解 层叠上下文的创建 定位元素与传统层叠上下文 层叠上下文与层叠顺序 ...
- css如何让两个div上下排列_CSS层叠上下文
在理解层叠上下文之前,我们先谈一谈CSS的z-index属性. 通常情况下,HTML页面可以被认为是二维的,因为文本,图像和其他元素被排列在页面上而不重叠. 然而其实CSS 允许你在现有的渲染引擎上层 ...
- CSS基础：CSS的上下文之层叠上下文
CSS的上下文之层叠上下文 看到层叠,大家一定会联想到定位元素会是的元素之间发生"遮挡",而z-index可以改变他们之间的遮挡优先级,但这仅仅是层叠这一概念中很小的一部分. 本文 ...
- css层叠上下文详解,CSS定位（层叠上下文）
前面花大力气介绍了布局,现在讲一讲CSS的定位. 定位是什么? 定位跟布局有啥关系?答案是没有关系,定位是指CSS在立体的角度的堆叠的情况,是垂直于屏幕的. 常常会有一个疑惑,CSS中,我给其中的一个 ...
- CSS 格式化上下文详解
CSS格式化上下文 CSS 中很重要的一环就是 BFC 块级格式化上下文,本文整理了 CSS BFC 的相关知识,建议沐浴更衣后食用. 在正式讲解BFC之前,先了解一下浏览器外边距重叠的问题. 外边距 ...
- 推荐大家使用的CSS书写规范、顺序
推荐大家使用的CSS书写规范.顺序 CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, ...
- 关于js css html加载顺序整理
参考原文 豆豆蛙:关于js css html加载顺序整理 1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正 ...
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
最新文章
- 探究！一个数据包在网络中的心路历程
- TTDebug 快速打印 log ------rect point size
- 数据库密码过期 怎么修改
- Mockito的使用（二）——@InjectMocks、@Spy、@Mock
- No.1010_第七次团队会议
- 一文读懂工业设备的两种通讯方式：现场总线和工业以太网
- c语言中x的n次方怎么表示_线性代数的本质及其在AI中的应用
- python画柱形图把奇数年份也显示出来_python - Matplotlib奇数子图 - 堆栈内存溢出...
- Python 制作动态图表，看全球疫情变化趋势
- Memcache入门知识
- svn和maven结合讨论
- 10g添加用户 oracle_oracle10g下新建/删除用户
- Tracup丨什么是甘特图？关于甘特图的百科全书
- oracle roseha 配置,RoseHA 9.0 for Windows配合Oracle11g配置文档_v2.0-2015-04.pdf
- 两相四线混合式步进电机用双H桥驱动电路
- 【阿里云】互联网、电商行业实时大数据分析及大屏 DataV 展示最佳实践学习
- python交通标志识别_利用pytorch实现交通标志识别
- keychron的机械键盘
- 如何解决上传到github上的图片显示不出来的问题
- 军团的崛起：利用多态指挥多兵种作战