z-index

概述

所有整数都可以作为z-index的值，包括负数。

对于CSS2.1来说，页面元素的堆叠规则如下图所示:

1. 对于定位元素（position不是static）来说，不设置z-index或z-index相同时，后面元素覆盖前面元素

2. 对于处于同一堆叠上下文中的同一层次的元素来说，默认z-index较大值覆盖z-index较小值的元素

一旦为元素指定了z-index，且z-index不是auto；该元素就会建立自己的局部堆叠上下文。这意味着，元素的所有后代相对于该元素都有其自己的叠放顺序。

auto值指当前堆叠上下文中生成的栈层次与其父框的层次相同，这个框不会建立新的局部叠放上下文。

z-index:auto与z-index:0的值相等，但z-index:0会建立新的局部堆叠上下文；而z-index:auto不会。

在CSS3中，设置以下9个属性中的任意一个，层叠上下文z-index都会生效：

1、z-index值不为auto的flex项(父元素display:flex | inline-flex)

2、元素的透明度opacity值不等于1

3、元素的变形transform不是none

4、元素的mix-blend-mode值不是normal

5、元素的filter值不是none

6、元素的isolation值是isolate

7、will-change指定的属性值为上面的任意一个

8、元素的-webkit-overflow-scrolling设置为touch

9、元素的mask属性不是none