CSS--层叠上下文

张鑫旭大神的文章：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

总结：

层叠上下文的特性：

1. 层叠上下文的层叠水平要比普通元素高；

2. 层叠上下文可以阻断元素的混合模式；

3. 层叠上下文可以嵌套，内部层叠上下文及其子元素均受制于外部的层叠上下文；

4. 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素；

5. 每个层叠上下文时自成体系的，当发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

层叠上下文创建：

1. 页面根元素天生具有层叠上下文(根层叠上下文)，及html就是层叠上下文元素，所以定位元素在没有其他限制的时候，只能到浏览器窗口定位；

2. z-index值为数值的定位元素为层叠上下文，所以会限制子元素的定位；

以下为css3属性方式，

1. 父元素时flex | inline-flex布局，且子元素的z-index不为auto，则子元素为层叠上下文元素；

2. 元素的opacity的值不是1，则该元素为层叠上下文元素；

3. 元素的transform值不是none，则该元素为层叠上下文元素；

...不常用属性不再补充，详情可见原文。