css層疊上下文
css層疊
stacking order
#div{
background:#ddd;
border:1px solid red;
/*z-index: -1;*/
/*display:block*/
/*float: right;*/
/*display: inline-block;*/
/*z-index: auto;*/
/*z-index: 1;*/
}
首先html文檔流有一個基於z-index=auto的上下文環境
css屬性基於裝飾，布局，類容展示，z-index屬性值具有一個縱深的層疊順序(上下文展示)
諸如border/background一般為裝飾屬性，
而浮動和塊狀元素一般用作布局，
而內聯元素都是內容
當元素發生層疊的時候，其覆蓋關系關系
遵循下面2個準則
根層疊上下文指的是頁面根元素，也就是滾動條的默認的始作俑者<html>元素。
對於包含有position:relative/position:absolute的定位元素
z-index值大小有一個順序覆蓋關系
z-index:0所在的<div>元素是層疊上下文元素，而z-index:auto所在的<div>元素是一個普通的元素
而z-index一旦變成數值，哪怕是0，都會創建一個層疊上下文。
css元素對css層疊上下文的影響
半透明元素(opacity)/transform(30deg)/ filter: blur(5px)/will-change: transform; // 創建新的渲染層 具有層疊上下文，
圖片的z-index:-1無法穿透，於是，在藍色背景上面乖乖顯示了。
代碼重構：
當我們通過某些行為（點擊、移動或滾動）觸發頁面進行大面積繪制的時候，瀏覽器往往是沒有準備的，只能被動使用CPU去計算與重繪，
由於沒有事先準備，應付渲染夠嗆，於是掉幀，於是卡頓。
will-change: transform; // 創建新的渲染層 禮貌而友好
其中：
auto
就跟width:auto一樣，實際上沒什麽卵用，昨天嘛，估計就是用來重置其他比較屌的值。
scroll-position
告訴瀏覽器，我要開始翻滾了。
contents
告訴瀏覽器，內容要動畫或變化了。
<custom-ident>
顧名思意，自定義的識別。非規範稱呼，應該是MDN自己的稱呼，以後可能會明確寫入規範。比方說animation的名稱，計數器counter-reset, counter-increment定義的名稱等等。
.front::before { content: ‘‘; position: fixed; // 代替background-attachment width: 100%; height: 100%; top: 0; left: 0; background-color: white; background: url(/img/front/mm.jpg) no-repeat center center; background-size: cover; will-change: transform; // 創建新的渲染層 z-index: -1; }
移動端的GPU加速。很多自以為然的同學寫CSS3動畫的時候，或者靜態屬性的時候，
動不動就把translateZ之類GPU hack屬性寫上
後果與建議
- GPU這玩意提高頁面渲染性能它是有代價的呀，什麽代價呢，就是手機的電量
- 手機上的電量彌足珍貴
如果發現(尤其Android)機子h5頁面不流暢，找找看是不是動畫屬性使用問題，或者非可視動畫層沒隱藏等等原因
遵循最小化影響原則，所以，一開始的例子，才使用偽元素去搞，獨立渲染
使用JS添加will-change, 事件或動畫完畢，一定要及時remove
css層疊上下文