详解z-index

1.z-index概念

z-index定义

在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中，z轴即用户视角,z-index 改变这种顺序。z-index值越大，越靠前，类似于PS中图层的概念。

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

z-index 取值

• auto 自动(默认)
• integer 正数、负数或0 （整数）
• initial 使用默认的方式（IE不支持）

单纯考虑层叠顺序，z-index: auto和z-index: 0在同一层级，但这两个属性值本身是有根本区别的。

示例

两个层z-index相同时,按网页代码中层出现的顺序 1、z-index值相等时 红色DIV < 黄色DIV 2、z-index不赋值，即auto， 3、z-index:0和z-index:auto处于同一层叠等级

z-index 取值规范

• 最大：2147483647（231-1）
• 最小：-2147483647（231-1）

32位操作系统的int最大值，超过其限值时按最大值处理（不同浏览器有细微差异）。

取值建议规范： z-index :100、200、300.... 便于中间扩充

使用

上面熟悉了z-index之后，是否可以随意使用来改变层级了？

上述示例中：
Q1. 为什么DIV2在DIV1上面？
Q2. 为什么Z-index没生效，如何使其生效？

z-index 相关特性

• CSS2.1规范中，只在定位元素position上有效（非static）
• z-index值改变元素在其parent stacking context中Z轴的相对偏移量

这里的「相对偏移」指的是以parent SC为基准，相对于其它兄弟元素距离用户远近的顺序

2.层叠上下文(Stacking Context)

如何生成 Stacking context

1. HTML中的根元素，称为Root stacking context(根层叠上下文)
2. 普通元素设置position属性（非static）& z-index(非auto)
3. CSS3 中的新属性

注：

• position静态定位：默认值static，无特殊定位，它遵循正常的文档流对象
• z-index:(auto)：不生成层叠上下文（z-index:0可以）

具体如下：

1. position值为 fixed 或 sticky的元素
2. grid (grid) 容器的子元素，且 z-index 值不为 auto
3. opacity 属性值小于 1 的元素
4. mix-blend-mode 属性值不为 normal 的元素
5. transform、filter、perspective、clip-path、mask属性值不为 none 的元素
6. isolation 属性值为 isolate 的元素
7. -webkit-overflow-scrolling 属性值为 touch 的元素
8. will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素
9. contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素

上述只是举例常用及可能用到的。

Stacking context是如何影响z-index的？

1. 生成SC的元素层叠水平（Stacking Level）比普通元素高
2. z-index值的比较只在当前Parent SC中有效
3. 当前SC的z-index受Parent SC的影响

层叠水平：

• 在同一个层叠上下文中，描述的是该SC中的SC元素在Z轴
• 在其他普通元素中，它描述定义的是这些普通元素在Z轴

注: HTML的层次结构和层叠上下文的层次结构是不同的

示例分析

• SC2中的子元素z-index:1
• SC3中子元素 z-index:10000
• SC2>SC3 子元素无法超过

3.层叠顺序（Stacking Order）

元素发生层叠时，按照特定的顺序规则在Z轴上垂直显示。

层叠现象

block word > background inline-block word < inline-block background 在没有设置背景的情况下，背景是透明的（transparent），红色盒子的文字高于绿色盒子的背景。

4.开发技巧

1. 首先先看要比较的两个元素是否处于同一个SC中

• 如果是，谁的层叠等级大，谁在上面
• 如果两个元素不在同一SC中，先比较他们的父SC

2. 当两个元素层叠水平相同、层叠顺序相同时，在 DOM 结构中后面的元素层叠等级在前面元素之上

其他相关

• CSS3时，无position属性，z-index值也可能生效（display:flex）
• 浏览器兼容性差异
• 避免在transform元素下做fixed定位

在Internet Explorer 6中，<select>元素是一个窗口控件，因此无论堆栈的自然顺序、位置值或z索引如何，它总是出现在堆栈顺序的顶部。 在Firefox版本2中，负的z-index值将把元素置于堆叠上下文的后面，而不是位于建立堆叠上下文的元素的背景和边框前面。

对于声明transfrom值非none元素，其子元素中若存在position: fixed将以声明transform的最近祖先作为基准而定位，这是因为transfrom值非none的元素定义了一个局部坐标系统，导致postion: fixed以此坐标系统计算布局。目前这个bug仍未被解决，官方建议避免在transform元素下做fixed定位。

5.小练习

<main class="wrap">
  <div class="pink">父:Pink
    <span class="pink-child">子:Pink Child
      <span class="pink-grandchild">孙:Pink Grandchild</span>
    </span>
  </div>
  <div class="yellow">父:Yellow
      <span class="yellow-child">子：Yellow Child</span>
  </div>
  <div class="green">父：Green</div>
</main>

• 父子关系无法改变: 子在上，父在下

1. 生成层叠上下文的元素 层叠水平 > 没有层叠上下文的元素 父：pink > 父：yellow
2. 子：Yellow Child > Pink 层叠上下文2 > 层叠上下文 1

• 生成层叠上下文的元素 > 普通元素

小测验

<div class="left">
  <div class="left-child"></div>
</div>
<div class="mid">
  	<div class="mid-child1"</div>
  	<div class="mid-child2"></div>
</div>
<div class="right">
  <div class="right-child"></div>
</div>

请思考?层叠顺序num值--答案在文末

辅助工具

Chrome扩展工具：

• z-index

可以显示页面z-index值顺序，点击可定位元素。

• z-context

• layers

这是浏览器自带图层工具： 如上方式打开后查看页面图层结构：

参考文章

• 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
• 深入理解CSS中的层叠上下文和层叠顺序
• 层叠上下文
• W3c文档
• z-index

揭晓答案：