z-index学习

看了z-index，写个总结；
这些资源：
1. 深入理解CSS中的层叠上下文和层叠顺序:http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
2. CSS深入理解之z-indexh ：ttp://www.imooc.com/learn/643
3. What You May Not Know About the Z-Index Property:http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property–webdesign-16892
4. Elaborate description of Stacking Contexts: https://www.w3.org/TR/CSS2/zindex.html

1. 层叠上下文和z-index不是一回事。

对于包含有position:relative/position:absolute的定位元素，以及FireFox/IE浏览器（不包括Chrome等webkit内核浏览器）（目前，也就是2016年初是这样）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。

2.Stacking Order

What’s also interesting is that non-positioned elements are located at
four different stacking levels. It makes sense when you think about
it. If all non-positioned elements were at the same stacking level, we
wouldn’t see text (inline box) on top of a div (block level box).

有趣的是前四层是没有任何定位属性的元素。不过你这么想就能想通了。如果没有定位属性的元素都在同一个level，那我们就看不到在div(block level box)顶层的text(inlinebox box)了。

3.务必牢记的层叠准则

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

4.层叠上下文元素有如下特性：

层叠上下文的层叠水平要比普通元素高（原因后面会说明）；
层叠上下文可以阻断元素的混合模式（见此文第二部分说明）；
层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。.

5.CSS3与新时代的层叠上下文

z-index值不为auto的flex项(父元素display:flex|inline-flex).
元素的opacity值不是1.
元素的transform值不是none.
元素mix-blend-mode值不是normal.
元素的filter值不是none.
元素的isolation值是isolate.
will-change指定的属性值为上面任意一个。
元素的-webkit-overflow-scrolling设为touch.

z-index 会找父级层叠上下文，直到body