css层叠上下文和层叠顺序

普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。

诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错，某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。

什么是层叠顺序

border/background一般为装饰属性，而浮动和块状元素一般用作布局，而内联元素都是内容。网页中最重要的是什么？当然是内容了哈，对不对！

因此，一定要让内容的层叠顺序相当高，当发生层叠是很好，重要的文字啊图片内容可以优先暴露在屏幕上

1. 位于最低水平的border/background指的是层叠上下文元素的边框和背景色。每一个层叠顺序规则适用于一个完整的层叠上下文元素。
2. 原图没有呈现inline-block的层叠顺序，实际上，inline-block和inline水平元素是同等level级别。
3. z-index:0实际上和z-index:auto单纯从层叠水平上看，是可以看成是一样的。注意这里的措辞——“单纯从层叠水平上看”，实际上，两者在层叠上下文领域有着根本性的差异。

4. ③. CSS3与新时代的层叠上下文
   CSS3的出现除了带来了新属性，同时还对过去的很多规则发出了挑战。例如，CSS3 transform对overflow隐藏对position:fixed定位的影响等。而这里，层叠上下文这一块的影响要更加广泛与显著。

   如下：

   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.

 

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