z-index的一些领悟

1、概念

1.什么是z-index？

z-index属性设置元素的堆叠顺序，适用于已经定位的元素（即position:relative/absolute/fixed）。

经过z-index在layer 0上控制「已定位」元素的前后顺序，其值越大元素越靠近用户。#这里layer 0指代root节点即html元素。

2.什么是 Stacking Context ？

翻译就是“堆叠上下文”。每一个元素仅属于一个堆叠上下文，元素的z-index描述元素在相同堆叠上下文中“z轴”的呈现顺序。

就像上面提到指代root节点的layer 0，在CSS中也能够构造出与其类似的结构，这种提供z-index栈空间特性并影响子元素渲染顺序的结构，咱们称之为stacking context。能够理解为是一个做用域。

3.z-index的取值：

 默认值：auto，当一个元素新生成时，他默认的z-index为auto，他不会本身产生一个新的local stacking context，因此会处于和父box相同的堆叠上下文中；

正负整数：这个整数就是当前元素的z-index值，z-index值为0也会生成一个local stacking context。

2、使 element 造成一个 Stackigng Content 的条件

知足如下规则的元素都将构造一个Stackigng Content 结构：

• 1.root元素（html）；
• 2.已定位元素，且指定z-index值非auto的元素；
• 3.flex item且指定z-index值非auto的元素；
• 4.opacity小于1的元素；
• 5.指定transform值非none的元素；
• 6.指定mix-blend-mode值非normal的元素；
• 7.指定filter值非none的元素；
• 8.指定isolation值为isolate的元素；
• 9.==特例 mobile webkit & chrome 22+， 指定position: fixed的元素==；
• 10.在will-change属性上指定值为上述列表任意属性的元素；
• 11.指定-webkit-overflow-scrolling值为touch的元素。

除1.2外，其他规则均摘抄自网上资料，需验证使用，并注意形成bug的隐患。

非定位元素 Stackigng Content 的特殊规则：

若是一个元素不是经过「定位」(position: absolute or relative)实现了stacking context，它将会以z-index: 0（高于auto）被看待，所以不管如何更改非「定位」元素的z-index都是无效的。

3、Stackigng Content 的特性

• 1.stacking context能够嵌套；
• 2.每一个stacking context相对于兄弟元素是彻底独立的，其内部规则不会影响到外部；
• 3.每一个stacking context元素都会被父stacking context当作一个元素施加stacking规则；

stacking context内部的元素若是没有造成stacking context，这个元素的z-index值是auto（但其实若是这个元素没有造成stacking context，z-index属性对这个元素的表现根本没有意义，咱们能够理解为这个元素和其parent stacking context是一体的）。

咱们经过给已定位元素指定z-index值，以改变这个元素在其parent stacking context中Z轴的「相对偏移」量。这里的「相对偏移」指的是以parent stacking context为基准，相对于其它兄弟元素距离用户远近的顺序。

对于造成stacking context的元素，因为他的z-index属性并不对内部元素产生影响，所以这个元素的子元素以这个元素（parent stacking context）为z-index相对基准点即z-index: auto，这些子元素的stacking context兄弟元素按照下面的远近顺序展现在屏幕：

parent stacking context >> z-index < 0 >> 非stacking context元素（z-index: auto） >> z-index >= 0
*注意在stacking context中的元素不会远于parent stacking context

PS：即便子元素的z-index值远远的小于其父元素的兄弟元素的z-index值，他也会在其父元素的兄弟元素之上显示。

渲染的时候，先肯定小的stacking context中的顺序，一个小的stacking context肯定了之后再将其放在父stacking context中堆叠。有种由内而外，由小及大的感受

4、其余一些堆叠顺序

1.不使用z-index时的堆叠顺序（即默认状况）：

根元素（即HTML元素）的background和borders；

正常流中非定位后代元素（这些元素顺序按照HTML文档出现顺序）；----正常流中非定位元素，老是先于定位元素渲染，因此表现就是在定位元素下方，跟它在HTML中出现的顺序无关；

已定位后代元素（这些元素顺序按照HTML文档出现顺序）；----没有指定z-index值的定位元素，他们的堆叠顺序取决于在HTML文档中的顺序，越靠后出现的元素，位置越高，和position属性无关。

2.浮动堆叠顺序：

浮动元素z-index位置介于非定位元素和定位元素之间。

根元素（即HTML元素）的背景和border；

正常流中非定位后代元素（这些元素顺序按照HTML文档出现顺序）；

浮动元素(浮动元素之间是不会出现z-index重叠的)；

正常流中inline后代元素；

已定位后代元素（这些元素顺序按照HTML文档出现顺序）。

3.z-index对堆叠顺序控制的示意图：

• Root：z-index值为默认auto，即0
  • parent stacking context 1：z-index=1
    • stacking context：z-index=1，其父元素z-index值 1,因此最终值为1.1
    • stacking context：z-index=2，其父元素z-index值 1,因此最终值为1.2
    • stacking context：z-index=-2，其父元素z-index值 1,因此最终值为1.-2
  • parent stacking context 2：z-index=2

5、使用z-index的小技巧

尽可能避免给z-index使用负值。固然不是绝对的，好比在作图文替换的时候可使用负值。

为避免不一样的stacking context 赋值相同的z-index，或者不一样的stacking context随意赋值z-index大小的值，使z-index值太过混乱，能够划分父stacking context 的z-index值得区域，好比[0--100],[101--200],[201--300]，第一个父stacking context下的子stacking context一样划分区域，如[0-10],[11-20]......以此类推。

 

----以上内容总结整理于 starof 以及 Abruzzi 两位前辈的博客，以及一些本身我的的领悟和实验结果。