彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言
最近,在项目中遇到一个关于CSS中元素z-index
属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position
属性和z-index
相关属性后,页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解,也没找到一个合理的解释。我知道,肯定是我对相关属性的细节理解存在问题,所以结合官方文档和在网上各种搜集整理,明白了其中的原因。写下这篇文章,和大家分享有关CSS中层叠上下文
、层叠等级
、层叠顺序
以及z-index
相关的一整套技术细节。
如果存在什么错误或重要遗漏或者有什么疑问,欢迎留言指正、讨论!感谢!
本文已同步至我的个人主页。更多内容,欢迎访问我的GitHub主页,谢谢关注和支持!
一个“片面”的理解
以往,由于自己使用z-index
的频率不大,所以对这个CSS属性存在比较片面的认识。一直认为z-index
就是用来描述定义一个元素在屏幕Z轴
上的堆叠顺序。z-index
值越大在Z轴
上就越靠上,也就是离屏幕观察者越近。最后才发现这个认识存在很大的问题:
- 首先,
z-index
属性值并不是在任何元素上都有效果。它仅在定位元素(定义了position
属性,且属性值为非static
值的元素)上有效果。 - 判断元素在
Z轴
上的堆叠顺序,不仅仅是直接比较两个元素的z-index
值的大小,这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定。
要想完全理解一个东西,首先要明白它是什么,也就是它的定义。我们先看看上面提到的层叠上下文
、层叠等级
、层叠顺序
都是什么?定义又太过抽象,后面会再用一个具象的比喻来让你彻底明白它们到底是什么,有什么联系。
什么是“层叠上下文”
层叠上下文(stacking context),是HTML中一个三维的概念。在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴
,Y轴
以及表示层叠的Z轴
。一般情况下,元素在页面上沿X轴Y轴
平铺,我们察觉不到它们在Z轴
上的层叠关系。而一旦元素发生堆叠,这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
如果一个元素含有层叠上下文,(也就是说它是层叠上下文元素),我们可以理解为这个元素在Z轴
上就“高人一等”,最终表现就是它离屏幕观察者更近。
具象的比喻:你可以把层叠上下文元素理解为理解为该元素当了官,而其他非层叠上下文元素则可以理解为普通群众。凡是“当了官的元素”就比普通元素等级要高,也就是说元素在
Z轴
上更靠上,更靠近观察者。
什么是“层叠等级”
那么,层叠等级指的又是什么?层叠等级(stacking level,叫“层叠级别”/“层叠水平”也行)
- 在同一个层叠上下文中,它描述定义的是该层叠上下文中的层叠上下文元素在
Z轴
上的上下顺序。 - 在其他普通元素中,它描述定义的是这些普通元素在
Z轴
上的上下顺序。
说到这,可能很多人疑问了,不论在层叠上下文中还是在普通元素中,层叠等级都表示元素在Z轴
上的上下顺序,那就直接说它描述定义了所有元素在Z轴
上的上下顺序就OK啊!为什么要分开描述?
为了说明原因,先举个栗子:
具象的比喻:我们之前说到,处于层叠上下文中的元素,就像是元素当了官,等级自然比普通元素高。再想象一下,假设一个官员A是个省级领导,他下属有一个秘书a-1,家里有一个保姆a-2。另一个官员B是一个县级领导,他下属有一个秘书b-1,家里有一个保姆b-2。a-1和b-1虽然都是秘书,但是你想一个省级领导的秘书和一个县级领导的秘书之间有可比性么?甚至保姆a-2都要比秘书b-1的等级高得多。谁大谁小,谁高谁低一目了然,所以根本没有比较的意义。只有在A下属的a-1、a-2以及B下属的b-1、b-2中相互比较大小高低才有意义。
再类比回“层叠上下文”和“层叠等级”,就得出一个结论:
- 普通元素的层叠等级优先由其所在的层叠上下文决定。
- 层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
如何产生“层叠上下文”
前面说了那么多,知道了“层叠上下文”和“层叠等级”,其中还有一个最关键的问题:到底如何产生层叠上下文呢?如何让一个元素变成层叠上下文元素呢?
其实,层叠上下文也基本上是有一些特定的CSS属性创建的,一般有3种方法:
HTML
中的根元素<html></html>
本身j就具有层叠上下文,称为“根层叠上下文”。- 普通元素设置
position
属性为非static
值并设置z-index
属性为具体数值,产生层叠上下文。 - CSS3中的新属性也可以产生层叠上下文。
至此,终于可以上代码了,我们用代码说话,来验证上面的结论:
栗子1: 有两个div,p.a、p.b被包裹在一个div里,p.c被包裹在另一个盒子里,只为.a、.b、.c设置position
和z-index
属性
<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><body> <div> <p class="a">a</p> <p class="b">b</p> </div> <div> <p class="c">c</p> </div>
</body>
复制代码
效果:
因为p.a、p.b、p.c三个的父元素div都没有设置z-index
,所以不会产生层叠上下文,所以.a、.b、.c都处于由<html></html>
标签产生的“根层叠上下文”中,属于同一个层叠上下文,此时谁的z-index
值大,谁在上面。
栗子2: 有两个div,p.a、p.b被包裹在一个div里,p.c被包裹在另一个盒子里,同时为两个div和.a、.b、.c设置position
和z-index
属性
<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;z-index: 9999;}
</style><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>
复制代码
效果:
我们发下,虽然p.c
元素的z-index
值为9999,远大于p.a
和p.b
的z-index
值,但是由于p.a
、p.b
的父元素div.box1
产生的层叠上下文的z-index
的值为2,p.c
的父元素div.box2
所产生的层叠上下文的z-index
值为1,所以p.c
永远在p.a
和p.b
下面。
同时,如果我们只更改p.a
和p.b
的z-index
值,由于这两个元素都在父元素div.box1
产生的层叠上下文中,所以,谁的z-index
值大,谁在上面。
什么是“层叠顺序”
说完“层叠上下文”和“层叠等级”,我们再来说说“层叠顺序”。“层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴
上垂直显示。由此可见,前面所说的“层叠上下文”和“层叠等级”是一种概念,而这里的“层叠顺序”是一种规则。
在不考虑CSS3的情况下,当元素发生层叠时,层叠顺讯遵循上面途中的规则。 这里值得注意的是:
- 左上角"层叠上下文
background/border
"指的是层叠上下文元素的背景和边框。 inline/inline-block
元素的层叠顺序要高于block
(块级)/float
(浮动)元素。- 单纯考虑层叠顺序,
z-index: auto
和z-index: 0
在同一层级,但这两个属性值本身是有根本区别的。
对于上面第2条,为什么
inline/inline-block
元素的层叠顺序要高于block
(块级)/float
(浮动)元素?这个大家可以思考一下! 其实很简单,像border/background
属于装饰元素的属性,浮动和块级元素一般用来页面布局,而网页设计之初最重要的就是文字内容,所以在发生层叠时会优先显示文字内容,保证其不被覆盖。
你要的“套路”
上面说了那么多,可能你还是有点懵。这么多概念规则,来点最实际的,有没有一个“套路”当遇到元素层叠时,能很清晰地判断出他们谁在上谁在下呢?答案是——肯定有啊!
1、首先先看要比较的两个元素是否处于同一个层叠上下文中: 1.1如果是,谁的层叠等级大,谁在上面(怎么判断层叠等级大小呢?——看“层叠顺序”图)。 1.2如果两个元素不在统一层叠上下文中,请先比较他们所处的层叠上下文的层叠等级。 2、当两个元素层叠等级相同、层叠顺序相同时,在DOM结构中后面的元素层叠等级在前面元素之上。
光说不练假把式
对于技术学习,代码展示是最直观最易懂的方式之一。话不多说,直接上代码,我们通过以下几个“栗子”,来进一步验证掌握上面的结论。
栗子3:
<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>
</head><body><div class="box1"><div class="child1"></div></div><div class="box2"><div class="child2"></div></div>
</body>
复制代码
效果:
说明:.box1/.box2
虽然设置了position: relative
,但是z-index: auto
的情况下,这两个div
还是普通元素,并没有产生层叠上下文。所以,child1/.child2
属于<html></html>
元素的“根层叠上下文”中,此时,谁的z-index
值大,谁在上面。
栗子4:
对于栗子1中的CSS代码,我们只把.box1/.box2
的z-index
属性值改为数值0
,其余不变。
.box1, .box2 {position: relative;z-index: 0;
}
...复制代码
效果:
说明: 此时,我们发现,仅仅修改了.box1/.box2
的z-index
属性值改为数值0
,最终结果完全相反。这时.child2
覆盖在了.child1
上面。原因是什么呢?很简单:因为设置z-index: 0
后,.box1/.box2
产生了各自的层叠上下文,这时候要比较.child1/.child2
的层叠关系完全由父元素.box1/.box2
的层叠关系决定。但是.box1/.box2
的z-index
值都为0
,都是块级元素(所以它们的层叠等级,层叠顺序是相同的),这种情况下,在DOM
结构中后面的覆盖前面的,所以.child2
就在上面。
CSS3中的属性对层叠上下文的影响
CSS3中出现了很多新属性,其中一些属性对层叠上下文也产生了很大的影响。如下:
- 父元素的display属性值为
flex|inline-flex
,子元素z-index
属性值不为auto
的时候,子元素为层叠上下文元素; - 元素的
opacity
属性值不是1
; - 元素的
transform
属性值不是none
; - 元素
mix-blend-mode属性值不是
normal`; - 元素的
filter
属性值不是none
; - 元素的
isolation
属性值是isolate
; will-change
指定的属性值为上面任意一个;- 元素的
-webkit-overflow-scrolling
属性值设置为touch
。
CSS3中,元素属性满足以上条件之一,就会产生层叠上下文。我们用第1条来做一个简单的解释说明。
栗子5:
<style>.box {}.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>
复制代码
效果:
说明: 我们发现,.child
被.parent
覆盖了。按照“套路”来分析一下: 虽然.parent
设置了z-index
属性值,但是没有设置position
属性,z-index
无效,所以没有产生层叠上下文,.parent
还是普通的块级元素。此时,在层叠顺序规则中,z-index
值小于0
的.child
会被普通的block
块级元素.parent
覆盖。
栗子6:
对于上面的栗子,我们只修改.box的属性,设置display: flex,其余属性和DOM结构不变。
.box {display: flex;
}
复制代码
效果:
说明: 当给.box
设置display: flex
时,.parent
就变成层叠上下文元素,根据层叠顺序规则,层叠上下文元素的background/border
的层叠等级小于z-index
值小于0
的元素的层叠等级,所以z-index
值为-1
的.child
在.parent
上面。
小测试
下面的代码,我会把最终页面渲染的结果放在代码之后,有兴趣的“童鞋”可以分析一下,各个元素的层叠等级,最后来确定这些元素哪个在上哪个在下。
<style>.parent {width: 100px;height: 200px;background: #168bf5;position: absolute;top: 0;left: 0;z-index: 0;}.child1 {width: 100px;height: 200px;background: #32d19c;position: absolute;top: 20px;left: 20px;z-index: 1;}.child2 {width: 100px;height: 200px;background: #e4c950;position: absolute;top: 40px;left: 40px;z-index: -1;}.child2-1 {width: 100px;height: 200px;background: #e45050;position: absolute;top: 60px;left: 60px;z-index: 9999;}.child2-2 {width: 100px;height: 200px;background: #db68a7;position: absolute;top: 80px;left: 40px;z-index: -9999;}
</style>
</head><body><div class="parent">parent<div class="child1">child1</div><div class="child2">child2<div class="child2-1">child2-1</div><div class="child2-2">child2-2</div></div></div>
</body>
复制代码
效果:
参考文章
以上的内容有一部分内容参考了以下两位大神的博客,写的很好,也很清晰,推荐大家看一看,你会对相关知识点掌握的更清晰。
- 张鑫旭-《深入理解CSS中的层叠上下文和层叠顺序》
- AMInInsist-《CSS 中的z-index属性》
推荐文章
下面的文章链接是我在学习实践过程中看到的一些觉得比较好的文章,有兴趣霍有需要的朋友可以参考参考,希望可以帮你彻底弄清文章中涉及的这些问题。
- lijinxieyang-《层叠上下文【stacking context】与层叠顺序【stacking order】》
- w3help.org - 《KB013: 分层的显示( Layered presentation )》
- MDN-《The stacking context》
- 尚-《css之层叠上下文和层叠顺序》
彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index相关推荐
- vb6 combo根据index显示_彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
- 聚齐这三张宝图,搞懂css权重
CSS权重的知识点算是一个难点,需要掌握所有的选择器,起码看到选择器能分辨出是哪种选择器.我集齐了 3 张图,看看这 3 张图能不能帮你搞懂 CSS 权重(优先级)问题.
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- CSS教程 (一文彻底搞懂CSS)
认识一下CSS 什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中, ...
- 「CSS 3D 专题」搞懂 CSS 3D,你必须理解 perspective(视域)这个属性
关注前端达人,与你共同进步 开篇 上一章节<学习前,你需要了解什么是CSS 3D?>里,我们一起了解什么是CSS 3D,本篇章节笔者将带着大家学习 perspective(视域)这个重要属 ...
- rem 前端字体_web前端入门到实战:一次搞懂CSS字体单位:px、em、rem和%
对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的C ...
- css 百分比 怎么固定正方形_web前端入门到实战:一次搞懂CSS字体单位:px、em、rem和%
对于绘图和印刷而言,"单位"相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px.em.rem-等),这篇文章将整理这些常用的C ...
- 搞懂 CSS 水平居中与垂直居中的16个方法
一.水平居中 1.1 行内元素 .parent {text-align: center; } 复制代码 1.2 块级元素 1.2.1 块级元素一般居中方法 .son {margin: 0 auto; ...
- 十分钟轻松搞懂CSS的五大定位方式!(建议收藏)
文章目录 一.CSS之position定位方式 1.static 2.relative 3.absolute(脱离正常文档流) 4.fixed(脱离正常文档流) 5.sticky 二.z-index ...
- 【精选】一文搞懂css三大特性
文章目录 前言 一.css的三大特性都有什么? 二.盒子模型 1.盒子属性 ①盒子边框border ②盒子边角border-radius ③盒子阴影 box-shadow 2.内边距padding 3 ...
最新文章
- Python–新一代编程语言
- mingw w64 v8.0.0_使用Visual Studio Code和MinGW编译运行C++代码
- maven 多模块项目关系
- android 水平方向瀑布流,Android RecyclerView(瀑布流)水平/垂直方向分割线
- JMeter中如何实现跨线程组关联
- 不能显示隐藏文件的问题
- CentOS 6.5安装chromium
- 2.4GHz/5.8GHz WiFi 天线基础知识
- 如何给文件添加everyone权限
- 小米电脑如何把计算机放桌面上,小米电脑怎么把此电脑放到桌面上
- 形式化方法 | Proof Engineering in Coq——Coq tatics 在命题逻辑证明中的应用
- AS3中常用到的公式
- 框架使用 - 收藏集 - 掘金
- python爬取微信好友头像_python 使用wxpy实现获取微信好友列表 头像 群成员
- Excel里如何设置保留几位小数
- 神州云服务平台(型号:DCC-CRL1000)基本配置教学视频
- “AI+”将比“互联网+”落地更容易
- 浅谈高大上的微信小程序中渲染html内容—技术分享
- SpringBoot集成Kafka
- Linux学习之文件I/O操作
热门文章
- 东南亚电商lazadashopee平台怎么开店,需要什么条件?
- markdown pad2注册码(2017年9月27日)
- LaTeX常用的希腊字符、数学符号、矩阵、公式、排版、中括号、大括号以及插入图片等操作手册
- 算法竞赛入门经典(紫书)第四章——Spreadsheet Tracking UVA-512
- 使用 Inkscape 制作电子签名
- 全志A33N切换分支.repo/repo/repo forall -c git checkout exdroid-7.1.1_r23-a33-v7.0rc2.1
- 三角函数科学计算机在线应用,Scientific Calculator插件,在线科学计算器
- 一、VMware及win10虚拟机的安装及环境配置
- matlab怎么新建文件运行不了,关于:Matlab中直接双击fig文件运行出错,而从.m文件运行却不会出错问题的一点心得...
- 步进电机、伺服电机、舵机的原理和区别?