CSS笔记——z-index

概念

z-index属性指定了元素及其子元素的层级顺序，通常较大z-index值得元素会覆盖较低的那一个。

属性值

• z-index: auto； （默认值）

• z-index: <integer> ; （整数值）

• z-index: inherit ; （继承）

特性

1. 支持负值；
2. 支持CSS3 animation动画；
3. 在CSS 2.1时代，需要配合定位元素去使用；

z-index与定位属性

z-index只对定位元素起作用

如果定位元素z-index没发生嵌套：

1. 后来居上原则
2. 哪个z-index值大，哪个上

如果定位元素z-index发生了嵌套：（整数值）

祖先优先原则，只计算父元素z-index值

例如这里，只计算祖先的z-index值，后面的定位元素，后来居上。

但是，

如果z-index: auto, 则会直接按照里面img的z-index层级进行对比。

此时，img层级为2，显示在上层。

CSS中的层叠上下文和层叠水平

层叠上下文

表示元素在Z轴的关系，数值大，则 ”高人一等“。

为了便于说明，我们假设：

皇帝（你）

当官（层叠上下文元素）

家族（嵌套）

于是，上面那句话也可以这么说。

层叠上下文是表示：老百姓HTML元素当官了，离皇帝更近了。

• 页面根元素天生具有层叠上下文，称之为“根层叠上下文”—— 皇亲国戚

• z-index值为数值的定位元素，也具有层叠上下文 —— 科考入试

• 其他属性… —— 其他当官途径

特性：

• 层叠上下文可以嵌套，组合成一个分层次的层叠上下文。
  （一个家里，爸爸可以当官，同时孩子也能当官。这个家族的官，就当得比较有层次。）

• 每个层叠上下文，只影响后代元素，不对兄弟元素造成任何影响。
  （自己当官，兄弟不沾光。有什么福利或变故，只影响自己的孩子们。）

• 每个层叠上下文是自成体系的，当元素内容被层叠后，整个元素被认为是在父层的层叠顺序中。
  （每个当官的都有自己的小团体，当子孙或树下发生摩擦时，都是自己宅院的事，不会影响自己和皇帝的距离。）

层叠水平

层叠上下文中的每个元素，都有一个层叠水平，决定了在z轴上的显示顺序。

遵循 ”后来居上“ 和“谁大谁上”的层叠准则。

每一个当官的家里儿孙，都有一个论资排辈（层叠水平），决定了谁更靠前。

注意！！！

层叠水平和z-index不是一个东西！！！

任何元素都有层叠水平，但是z-index只有定位元素才有。

层叠顺序

元素发生层叠时，有着特定的垂直显示顺序


著名的七阶层叠水平

1. 层叠顺序的意义

规范元素层叠时的呈现规则。

2. 为何层叠顺序是这样的？

  更符合页面加载的功能和实现。    

内容是页面最重要的实体，因此层叠水平要高。

这里背景色覆盖是层叠顺序，文字覆盖是后来居上。

z-index与层叠上下文

1. 定位元素默认z-index: auto，可以看成z-index: 0 ;

举个例子，

前{ posetion: relative;}

前面的定位元素层叠水平，比后面的普通元素高，所以它在上面。

2. z-index不为auto的定位元素，将创建层叠上下文 ；

从层叠顺序上来讲，z-index: auto 可以看成z-index: 0。但是从层叠上下文来讲，两者却有着本质差异。

3. z-index受限于父级层叠上下文

前{ position: relative ; z-index: 0 ;}前  图片 { position： abosulute ;  z-index: 9999 ; }后{ position: relative ; z-index: 1 ;}后  图片 { position： abosulute ;  z-index: -1 ; }

前面的图片虽然z-index是999,但是受限于父元素的层叠上下文，还是让后面的图片“后来居上”。

其他CSS属性与层叠上下文

1. display: flex与层叠上下文

两个条件才能形成层叠上下文：

1）父级需要是display:flex或者display:inline-flex水平 ;

2）是元素的z-index不是auto，必须是数值。

此时，这个子元素为层叠上下文元素，注意不是flex父级元素。

代码：

<div class="box">    <div>        <img src="mm1.jpg">    </div></div>.box {  }.box > div { background-color: blue; z-index: 1; }    /* 此时该div是普通元素，z-index无效 */.box > div > img {   position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */}

结果如下：

我们发现，图片跑到蓝色背景的下面了。

现在来看看层叠顺序图




从上图可以看出负值z-index的层叠顺序在block水平元素的下面，而蓝色背景div元素是个普通元素，因此，图片直接穿越过去，在蓝色背景后面的显示了。


现在，我们CSS微调下，增加display:flex, 如下：

.box { display: flex; } /*注意这里*/.box > div { background-color: blue; z-index: 1; }    /* 此时该div是层叠上下文元素，同时z-index生效 */.box > div > img {   position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */}

结果如下：

我们发现，此时图片在蓝色背景上面显示了。再来看看层叠顺序图

从上图可以看出，负值z-index的层叠顺序在当前父层叠上下文元素的上面。

而此时，那个z-index值为1的蓝色背景<div>的父元素的display值是flex，一下子升官发财变成层叠上下文元素了，于是，图片在蓝色背景上面显示了。

这个现象也证实了层叠上下文元素是flex子元素，而不是flex容器元素。

2. opacity≠ 1 与层叠上下文

只要给父元素设置透明度属性，它将会创建层叠上下文。

3. transform≠ none 与层叠上下文

只要给父元素设置transform属性，它将会创建层叠上下文。

4. mix-blend-mode ≠ normal 与层叠上下文

只要给父元素设置mix-blend-mode属性，它将会创建层叠上下文。

5. filter ≠ none 与层叠上下文

只要给父元素设置filter属性，它将会创建层叠上下文。

6. isolation: isolate 与层叠上下文

该属性需要配合mix-blend-mode（混合模式）一起使用，

只要给父元素设置isolation: isolate，它将会创建层叠上下文。

7. position: fixed 与层叠上下文

只要给父元素设置position: fixed，它将会创建层叠上下文。

（只有Chrome等blink/webkit浏览器才起作用，IE/FF不起作用）

8. will-change 与层叠上下文

只要给父元素设置will-change属性，它将会创建层叠上下文。

9. -webkit-overflow-scrolling 与层叠上下文（移动端）

只要给父元素设置-webkit-overflow-scrolling属性，它将会创建层叠上下文。

z-index与其他CSS属性层叠上下文

1. 不支持z-index的层叠上下文元素，它们的层叠顺序均是z-index: auto级别

2. 依赖于z-index的层叠上下文元素，它们的层叠顺序取决于z-index值

两种情况：

1） position为relative、absolute或fixed（部分浏览器）；

2） display: flex | inline-flex 容器的子flex项

z-index相关实践分享

1. 最小化影响原则

   目的：

   避免z-index嵌套层叠关系混乱

   原因：

   元素的层叠水平主要由所在的层叠上下文决定

   做法：

   1. 避免使用定位属性；2.定位属性从大容器平级，分离为私有小容器 

   
   

2. 不犯二准则

   目的：

   避免z-index混乱，一山比一山高的样式问题

   原因：

   多人协作以及后期维护

   做法：

   对于非浮层（弹框、遮罩），避免设置z-indexz-index值没不要的话，不需超过2

   
   

3. 组件层级计数器

   目的：

   避免浮层组件因z-index被覆盖

   原因：

   1. 总会遇到意想不到的高层级元素2. 组件的覆盖规则具有动态性

   做法：

   组件层级计数器方法；（通过JS获取body下子元素的最大z-index值）

4. z-index负值可访问性隐藏

例如，button按钮太丑了，我们使用label去关联它，然后通过设置label的CSS得到一个好看的按钮。

对于butoon的影藏，我们可以这样：

这是IE7或以下的

如果不需要考虑低版本浏览器，直接设置display：none**

文章内容总结自：

张鑫旭
视频——“慕课网——CSS深入理解之z-index”

论点与版权所有归原作者所有
深入理解CSS中的层叠上下文和层叠顺序