前言

在我的上一篇博客 深入理解层叠上下文（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。