z-index

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

Paste_Image.png

谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

注意

z-index:auto的定位元素也会创建层叠上下文。这就是为什么在过去，IE6/IE7的z-index会搞死人的原因。
z-index = 0 会创建层叠上下文

然后，我再提一下position:fixed, 在过去，position:fixed和relative/absolute在层叠上下文这一块是一路货色，都是需要z-index为数值才行。但是，不知道什么时候起，Chrome等webkit内核浏览器，position:fixed元素天然层叠上下文元素，无需z-index
为数值。根据我的测试，目前，IE以及FireFox仍是老套路。

1.z-index 必须和定位元素才起作用，但是新时代也能起作用

2. display:flex|inline-flex与层叠上下文

要满足两个条件才能形成层叠上下文：条件1是父级需要是display:flex
或者display:inline-flex水平，条件2是子元素的z-index不是auto，必须是数值。此时，这个子元素为层叠上下文元素，没错，注意了，是子元素，不是flex父级元素。

3. opacity与层叠上下文

4.transform与层叠上下文

5.mix-blend-mode与层叠上下文

6.filter与层叠上下文

7. isolation:isolate与层叠上下文

8.will-change与层叠上下文