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層疊上下文