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