前言

原文是在前面对transform引起的z-index“失效”探究过程中找到的,非常棒,所以转载分享。本文大多摘自原文,进行了压缩,也加入了我自己的理解,希望对大家有帮助。

默认情况下,网页内容是没有偏移角的垂直视觉呈现,当内容发生层叠的时候,一定会有一个前后的层叠顺序产生。

我们大家可能都熟悉CSS中的z-index属性,需要跟大家讲的是,z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。

一、什么是层叠上下文

层叠上下文,英文称作“stacking context”。是HTML中的一个三维的概念。如果一个元素含有层叠上下文,我们可以理解为这个元素在z轴上“高人一等”。

z轴
表示的是用户与屏幕的这条看不见的垂直线:

具象化
拥有层叠上下文的元素相当于是一个容器,容器里装着其他元素。
不同容器内的元素的高低由容器决定。容器里面的元素,有高低之分,但不会突破容器。

二、什么是层叠水平

“层叠水平”英文称作”stacking level”,决定了同一个层叠上下文中元素在z轴上的显示顺序。

就跟人一样,网页中的元素虽然都是独立个体,但是总有一个类似的排名排序的情况存在。这个就是层叠水平。层叠上下文的层叠水平是优先级更高的层叠水平。

普通元素的层叠水平优先由层叠上下文决定,因此,层叠水平的比较只有在当前层叠上下文元素中才有意义。

注意:千万不要把层叠水平和z-index属性混为一谈。某些情况下z-index确实可以影响层叠水平,但是,只限于定位元素以及flex盒子的子元素,而层叠水平所有的元素都存在。

三、什么是层叠顺序

“层叠顺序”英文称作”stacking order”,表示元素发生层叠时的垂直显示顺序。层叠上下文和层叠水平是概念,而这里的层叠顺序是规则。

在CSS2.1的年代,在CSS3还没有出现的时候(注意这里的前提),层叠顺序规则遵循下面这张图:

这样的设计是由元素的重要性出发的,内容优于布局,布局优于装饰

注意

  1. 这是css2的时候
  2. 这里的z-index: 0 只是表示一个0级别,对应的是z-index: auto,没有创建层叠上下文的级别

四、层叠准则

层叠领域的黄金准则。当元素发生层叠的时候,其覆盖关系遵循下面2个准则:

  • 谁大谁上
    当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个。

  • 后来居上
    当元素的层叠水平一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

五、层叠上下文的特性

层叠上下文元素有如下特性:

  • 层叠上下文的层叠水平要比普通元素高;
  • 层叠上下文可以阻断元素的混合模式;
  • 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文;
  • 每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素;
  • 每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。

六、层叠上下文的创建

层叠上下文基本是由一些特定的css属性所创建,主要分为三种:

1. 根层叠上下文

页面根元素,也就是滚动条的默认的始作俑者元素。这就是为什么,绝对定位元素在left/top等值定位的时候,如果没有其他定位元素限制,会相对浏览器窗口定位的原因。

2. 定位元素与传统层叠上下文

  • 设置position:relative/position:absolutez-index值不是auto的定位元素
  • 设置position:fixed的定位元素,z-index为任意

3. CSS3与新时代的层叠上下文

  • 设置了z-index,且不为auto的flex元素(父元素display:flex|inline-flex)
  • 设置了opacity,且不为1的元素
  • 设置了transform,且不为none的元素
  • 设置了mix-blend-mode值,且不为normal的元素
  • **设置了isolation,且为isolate的元素
  • 设置了filter值,且不是none的元素
  • will-change指定的属性值为上面任意一个
  • 设置了-webkit-overflow-scrolling,且为touch的元素

七、层叠上下文与层叠顺序

最终的层叠顺序分两种情况讨论:

    1. 层叠上下文不依赖z-index数值,其层叠顺序是z-index: auto,就是z-index: 0的级别,没有创建层叠上下文的元素的级别
    1. 层叠上下文依赖z-index数值,则由z-index决定
      也就是两个层叠准则的详细解释,第一个:后来者居上,第二个:谁大谁上。

引自

引自:张鑫旭的博客
本文地址:http://www.zhangxinxu.com/wordpress/?p=5115

生命的意义不仅是活着,而是我们给别人的生命带来了何种不同。