[TOC] ## 怎样的CSS属性可以使element形成一个Stacking Context **满足下面规则的元素将会构造出一个 [Stacking Context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) 结构：** * root元素(html) * 「已定位」元素（position: absolute or relative）且 指定z-index值非auto的元素 * flex item且指定z-index值非auto的元素 * opacity小于1的元素 * 指定transform值非none的元素 * 指定mix-blend-mode值非normal的元素 * 指定filter值非none的元素 * 指定isolation值为isolate的元素 * 特例 mobile webkit & chrome 22+， 指定position: fixed的元素 * 在will-change属性上指定值为上述列表任意属性的元素 * 指定-webkit-overflow-scrolling值为touch的元素 *注意除了前两条之外有如此多满足创建stacking context的条件，这也是造成诸多bug的源泉，比如opacity<1* # 参考 http://blog.angular.in/css-stacking-contextli-na-xie-xian-wei-ren-zhi-de-keng/ http://web.jobbole.com/83409/