前言
在我的上一篇博客深入理解层叠上下文（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上的例子，结合自己的理解总结的内容，相关文档如下：
由于本人水平有限，如有描述不准确的地方请给我留言，欢迎交流~
本文为个人原创，转载请注明出处。
