前言
在我的上一篇博客深入理解层叠上下文(1)中,我们知道了:
某些元素的渲染顺序是由其 z-index 的值影响的;
层叠上下文可以包含在其他层叠上下文中,并且一起创建一个层叠上下文的层级;
每个层叠上下文都完全独立于它的兄弟元素,当处理层叠时只考虑其子元素;
每个层叠上下文都是自包含的:当一个元素的内容发生层叠后,该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
正文
这一篇文章我想要来说一下,如果增加了浮动元素,层叠上下文又会如何呈现。
1.回顾
在正片开始前,我们再通过一个例子,来加深一下对层叠上下文的理解。
最后会给大家展示一个层叠上下文的“终极三维层叠结构图”~~~😆
有这么一个html结构,相比上一篇文章的例子要更复杂一点:
请大家来思考一下,这样一组结构,会怎样层叠呢?
根据上一篇文章中,我们了解的内容。我们知道每一个DIV都创造了一个层叠上下文(自己的小世界),因为他们都是定位元素且z-index值不为auto。
不知道各位读者有答案了没,我们先看一下层叠结果。
我们来分析一下:
首先,由于DIV #1,DIV #2,DIV #3属于同一个层叠上下文(他们都在根元素创造的小世界里),所以根据z-index值,层叠顺序从远到近依次是DIV #2,DIV #3,DIV #1。
其次,在DIV #3创造的层叠上下文中,根据z-index值,其子元素层叠顺序从远到近依次是DIV #5,DIV #6,DIV #4。
分析到这里可能有人会问,DIV #3的z-index值比DIV #5和DIV #6的z-index值要大啊,而且DIV #5的z-index还是负的,为什么DIV #3还在下面?!
好的,我来解释一下。虽然DIV #3的z-index值大于DIV #5和DIV #6的z-index值,但是DIV #3还是在子元素的下面。这是因为,DIV #3在根元素创造的小世界里,即根元素是他的”爸爸“;而DIV #4,DIV #5,DIV #6在DIV #3创造的小世界里,即DIV #3是他们的“爸爸”。“儿子”和“爸爸”是不能在一个空间里的,“爸爸”永远会为儿子垫底。
因此,DIV #3所有的“儿子”只需要互相比较就可以了,不需要和他们是“叔叔”(也就是DIV #1和DIV #2)比较。所以,由于DIV #3在DIV #1的下面,那么DIV #3和他的儿子们就都在DIV #1的下面。
源码请参考我的demo。
好了,到这里我相信各位对层叠上下文已经有了更深的认识。
那么,下面给大家介绍一下,如果来了一个浮动元素,层叠顺序又会如何。
2. 层叠与浮动
我们还是通过例子给大家介绍。
我们首先比较一下浮动元素、定位元素和正常文档流块级元素。
一共有5个div,其中DIV #1、DIV #5为定位元素,DIV #2、DIV #3为浮动元素,DIV #为正常文档流块级元素。
通过这个demo,我们发现层叠顺序从远到近依次是为正常文档流块级元素、浮动元素、定位元素。
好了,如果我们加入内联元素呢。
结果是,内联元素在浮动元素之上、定位元素之下。
我们再做一些改变,如果定位元素我给他一个负的z-index,层叠又会发生怎样变化。比如给DIV #5加一个-1的z-index。
Oh my GOD,DIV #5跑到正常文档流的下面了......😱😱😱
分析至此,可以做一个总结了。
一个层叠上下文中的元素到底是如何叠加的。请看下图。
源码请参考我的demo。
总结
综上所述,一个层叠上下文的层叠顺序由远及近为:
- 后代中的定位元素(z-index为负)按照它们在 HTML 中出现的顺序层叠
- 根元素的背景与边框
- 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
- 浮动块元素
- 常规流中的后代行内元素
- 后代中的定位元素(z-index为正)按照它们在 HTML 中出现的顺序层叠
后记
本文是作者根据MDN上的例子,结合自己的理解总结的内容,相关文档如下:
由于本人水平有限,如有描述不准确的地方请给我留言,欢迎交流~
本文为个人原创,转载请注明出处。