1. 程式人生 > >css層疊上下文

css層疊上下文

chm spl 數值 sla 屬性 觸發 最小 lte 手機

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