CSS技巧和工作总结
工作确实是两点一线的生活。而且偶尔还加班，不过也算是正规的做一些东西了，个人成长来说也还不错。很多稍微有深度的知识也有所接触。于是想写点东西记录下自己的成长。以后再回顾的时候也算有所收获。
# CSS 层叠水平
CSS 的层叠看起来很简单，可以通过z-index来进行调整，但是实际上并没有那么简单。层叠水平总共有 7 阶，我们实际在使用中的时候要充分考虑。
- 形成堆叠上下文环境的元素的背景与边框
- 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
- 正常流式布局，非 inline-block，无 position 定位（static 除外）的子元素
- 无 position 定位（static 除外）的 float 浮动元素
- 正常流式布局， inline-block 元素，无 position 定位（static 除外）的子元素（包括 display:table 和 display:inline ）
- 拥有 z-index:0 的子堆叠上下文元素
- 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）
这里有个重点概念是堆叠上下文，那么元素是如何形成堆叠上下文呢？
- 根元素 (HTML)
- z-index 值不为 "auto"的 绝对/相对定位
- 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex
- opacity 属性值小于 1 的元素
- transform 属性值不为 "none"的元素
- mix-blend-mode 属性值不为 "normal"的元素
- filter 值不为“none”的元素
- perspective 值不为“none”的元素
- isolation 属性被设置为 "isolate"的元素
- position: fixed
- 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
- -webkit-overflow-scrolling 属性被设置 "touch"的元素
如果符合上面规则，会形成层叠上下文。层叠上下文的背景一定是最下面的，想要通过z-index来调整浮动在其他元素上方是不可能的。
# DOM Ready
如果巧妙的在 DOM 加载完成之后来执行 JS 呢，最简单的方法是把 JS 放在 body 的最下方。但这样处理有些麻烦，最简单的方法是使用setTimeout方法，设置延迟时间为 0。延迟时间为 0 并不意味着这段代码会立即执行，而是等到所有 JS 加载和执行完毕，DOM 也加载完毕的时候才执行。
# Safari Scroll
手机版 Safari 在滑动的时候如果有动画执行，会导致整个页面空白。当滑动结束的时候才会渲染。我们不得不采用给所有元素添加transform: translate3d(0,0,0)属性，
来使 Safari 强制使用 GPU 加速。
# CSS 动画性能加速
CSS 动画尽量使用transform: translate3d(0,0,0)来实现，因为 ransform3d api 会强制开启 GPU 加速提高页面的流畅度。在公司的项目中，从使用background-position进行动画效果换成transform之后，动画流畅度得到了显著的改善。
参考：
Stack Overflow (opens new window)
The stacking context (opens new window)
层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？ (opens new window)