层叠上下文

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

概念

层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。层叠水平和CSS的z-index属性不能混为一谈，某些情况下z-index确实可以影响层叠水平。但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。

在默认情况下（是在css3之前）

inline-block盒子>float盒子>block盒子=(z-index:auto)>负z-index
以上可以理解为，装饰属性在最下，布局属性在上，内容属性在最上面。

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

<pre><div class="box">
<div>
<img src="mm1.jpg">
</div>
</div></pre>

<pre>
.box { }
.box > div {
background-color: blue; z-index: 1;
} /* 此时该div是普通元素，z-index无效 /
.box > div > img {
position: relative; z-index: -1; right: -150px;
} / 注意这里是负值z-index */
</pre>
这里只看Img的负z-index，所以在默认盒子下面

<pre><div class="box">
<div>
<img src="mm1.jpg">
</div>
</div></pre>

<pre>
.box { display:flex }
.box > div {
background-color: blue; z-index: 1;
} /* 此时该div是层叠上下文，z-index为1 /
.box > div > img {
position: relative; z-index: -1; right: -150px;
} / 注意这里是负值z-index */
</pre>
这里都是层叠了，父级div成了层叠背景。

opacity与层叠上下文

当opacity小于1时，就变成层叠上下文。遵循上面规则，父级div成了层叠背景

** transform与层叠上下文**

添加transform，也会变成层叠上下文

总结：

1. 首先关心的是是否是层叠元素，如果是层叠元素，就按照层叠规则（图）作比较。不是层叠元素的，就在图中默认情况。
2. 在css3，以下会让元素变成层叠元素：

• opacity小于1
• 新的filter属性
• transform
• 父级元素为flex属性

3. 比大小值，同级看顺序。