想象一下,现在有一个非常简单的网页,不考虑默认的 <html>
, <head>
, <body>
等元素,就只需要考虑每个网页至少都会有的一个 <div>
。在 CSS 文件中设置 html
的背景颜色为蓝色,设置 div
的背景颜色为红色,并设置宽高。
当加载页面的时候,你觉得会看到什么?
这个自然不用多想,引入眼帘的肯定是一大片的蓝色,同时还有一个此前设置好尺寸的红色块级元素。除非你做了额外的设置,否则这个元素将正常地出现在左上角。
你可能会说“就这?太简单了吧”,不过有一个问题可能不那么简单:为什么红色的块级元素就一定会位于蓝色背景的上层呢?为什么我们看到的就是 div
位于 html
的上层呢?原因是,它们都遵循了层叠顺序的规则。
在这个简单的例子中,根据规则,正常文档流的子块(div
)的层级将会高于根元素(html
)的背景和边框。我们看到div
位于顶层,这是因为它的层叠等级更高。
虽然上面这个例子只涉及到了两个层叠等级,但实际上,在一个层叠上下文中,一共可能出现七个层叠等级,从最低到最高排列,依次是:
-
背景和边框 :形成层叠上下文的元素的背景和边框,它是整个上下文中层叠等级最低的。
-
Z-Index 为负数 :设置了
z-index
为负数的子元素以及由它所产生的层叠上下文 -
块级盒模型:位于正常文档流中的、块级的、非定位的子元素
-
浮动盒模型 :浮动的、非定位的子元素
-
内联盒模型 :位于正常文档流中的、内联的、非定位的子元素
-
Z-index 为 0:设置了
z-index
为 0 的、定位的子元素以及由它所产生的层叠上下文 -
Z-Index 为正数 :设置了
z-index
为正数的、定位的子元素以及由它所产生的层叠上下文,它是整个上下文中层叠等级最高的
这七个层叠等级就构成了层叠顺序的规则。符合层叠等级七的元素,会比层叠等级在一到六的元素更“贴近我们”,符合层叠等级五的元素,会比层叠等级二的元素更“贴近我们”,以此类推。
第一次学习这些层叠规则的时候,我感觉收获了很多新的东西。如果只着眼于层叠等级二、六和七(也就是涉及到 z-index
的等级),那么大部分时候,我们对于 z-index
的理解是正确的。正的 z-index
的层级比 0 要高,而 0 又比负的要高,一切都符合直觉,可能大多数人到这里就不继续往后探究了。
我之前就是这样,在看到这些规则之前,以为除了正的和负的 z-index
,其它情况都可以看作是 z-index
为0 —— 不过现在我们很清楚了,这种想法是错误的。事实是,大部分元素的层级都要低于 z-index:0
。
还有一个有趣的细节是,非定位的元素实际位于四种不同的层叠等级中。乍一想觉得很奇怪,不过其实这是很合理的。假设所有的非定位元素都位于同一个层叠等级,那么我们就没办法在 div
(块级盒)上看到文本(内联盒)了。
来看个案例
我前面提到过很多次,当你给一个元素设置非 auto 的 z-inde
时,会创建一个新的、完全独立的层叠上下文。
重新回顾一下之前拿桌子做比喻的案例。一开始的时候,我们的桌子上摆满了四块砖头,上面是一个玻璃杯,再上面是一个水果盘。现在,假设又有一张新的桌子,它摆放的东西和旧桌子差不多,唯一的不同是,新桌子少了一个水果盘。
不难想象,旧桌子的水果盘是整个房间中位于最顶层的物品(它有最大的 z-index
),不过,如果把旧桌子以及它上面的所有东西整体搬到地下室呢?此时,水果盘的层级会比新桌子上的每一个物品都要低,这是因为,放置水果盘的旧桌子整体已经低于新桌子了。
对于网页上的定位元素来说,其实道理是一样的。假设有如下代码,思考一个问题:div.two
和 div.four
,哪个在上哪个在下?
HTML:
CSS:
div {
width: 200px;
height: 200px;
padding: 20px;
}
.one, .two, .three, .four {
position: absolute;
}
.one {
background: #f00;
outline: 5px solid #000;
top: 100px;
left: 200px;
z-index: 10;
}
.two {
background: #0f0;
outline: 5px solid #000;
top: 50px;
left: 75px;
z-index: 100;
}
.three {
background: #0ff;
outline: 5px solid #000;
top: 125px;
left: 25px;
z-index: 150;
}
.four {
background: #00f;
outline: 5px solid #ff0;
top: 200px;
left: 350px;
z-index: 50;
}
尽管 div.two
有更高的 z-index
(100),但在页面上,它的层级实际上比 div.four
(z-index
为50)要低。下图就是页面元素的层级情况,根据黑色和黄色边框,我们可以区分每个元素生成的不同的层叠上下文。
由于 div.two
位于 div.one
中,所以它的 z-index
是和 div.one
的层叠上下文相关的,也就是说,实际表现出来的 z-index
是下面这样的:
-
.one —— z-index = 10
-
.two —— z-index = 10.100
-
.three —— z-index = 10.150
-
.four —— z-index = 50
div.one
和内部包含的一切将会在层级上低于 div.four
,无论给 div.one
的子元素设置多大的 z-index
,子元素的层级都无法超过 div.four
。
看到这个例子是不是有一种熟悉的味道?我也曾经被 z-index
这么坑过一两次。我们都曾疑惑一个问题,为什么一个 z-index
非常大的元素,在层级上始终无法超过一个 z-index
比它小很多的元素?相信在学习了这些案例之后,你已经豁然开朗了。
总结
–
在最初学习 z-index
的时候,我们都会认为它很简单,这不就是代表元素在 z 轴上的位置吗?不过我们现在知道了,事情远没有这么简单。深入理解 z-index[9] 一文也揭示了 z-index
背后一些原理层面的东西,包括层叠上下文,层叠等级以及一系列决定元素的层叠顺序的规则。
最后,记住一个很重要的结论:定位元素可以创建新的层叠上下文,在这个上下文中的所有层叠等级,都会高于或者低于另一个层叠上下文的所有层叠等级。
拓展阅读
-
What No One Told You About Z-Index by Philip Walton
-
The Z-Index CSS Property: A Comprehensive Look on Smashing Magazine
-
How Well Do You Understand CSS Positioning?
-
The stacking context on Mozilla Developer Network
-
Z-Index And The CSS Stack: Which Element Displays First?
原文地址:What You May Not Know About the Z-Index Property
作者:Steven Bradley
译者:Chor
为了大家学习到最新的知识,我整理了很多有用资料,凡是点了**“在看”者,点击“进入公众号”,然后在后台回复以下关键字:**
-
回复「1024」领取前端进阶资料
-
回复「电子书」领取海量面试和JS资料
-
回复「资料」领取前端群分享及培训机构的资料
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
给大家分享一些关于HTML的面试题,有需要的朋友可以戳这里免费领取,先到先得哦。
是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!**
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
给大家分享一些关于HTML的面试题,有需要的朋友可以戳这里免费领取,先到先得哦。
[外链图片转存中…(img-YsI8bcZL-1712299918946)]
[外链图片转存中…(img-aUjauSw5-1712299918946)]