堆疊上下文
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
可以理解為堆疊作用域。跟 BFC 一樣秸应，我們只知道一些屬性會(huì)觸發(fā)堆疊上下文偏塞，但并不知道堆疊上下文是什么。
- 根元素 (HTML),
- z-index 值不為 "auto"的 絕對/相對定位族操，
- 一個(gè) z-index 值不為 "auto"的 flex 項(xiàng)目 (flex item)交胚，即：父元素 display: flex|inline-flex际邻，
- opacity 屬性值小于 1 的元素（參考 the specification for opacity），
- transform 屬性值不為 "none"的元素腔彰，
- mix-blend-mode 屬性值不為 "normal"的元素叫编，
- filter值不為“none”的元素，
- perspective值不為“none”的元素霹抛，
- isolation 屬性被設(shè)置為 "isolate"的元素搓逾，
- position: fixed
- 在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值（參考 這篇文章）
- -webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素
普通元素的層疊水平優(yōu)先由層疊上下文決定杯拐，因此霞篡，層疊水平的比較只有在當(dāng)前層疊上下文元素中才有意義世蔗。
image.png
注意在有層疊上下文時(shí)候，順序會(huì)變成
css30.PNG
負(fù)的z-index的位置提前2個(gè)啦
補(bǔ)充詳細(xì)知識http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
