[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/