写代码啦
深入理解层叠上下文(2)
回复数(0) 浏览数(35)
{{topic.upvote_count || 0}} 编辑 回复

前言

在我的上一篇博客深入理解层叠上下文(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上的例子,结合自己的理解总结的内容,相关文档如下:

由于本人水平有限,如有描述不准确的地方请给我留言,欢迎交流~

本文为个人原创,转载请注明出处。

前言

在我的上一篇博客深入理解层叠上下文(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上的例子,结合自己的理解总结的内容,相关文档如下:

由于本人水平有限,如有描述不准确的地方请给我留言,欢迎交流~

本文为个人原创,转载请注明出处。

35
回复 编辑