1.如果没有设置z-index 默认值是auto，浏览器会根据顺序来决定zindex，同层级，顺序下面的会在上面
2.如果你的z-index不生效，你需要把元素的position设置为static之外的值，（在flexbox或grid中不需要考虑这个情况）
目的是生成一个stacking context
3. A stacking context is a group of elements that have a common parent and move up and down the z axis together.
* The <html> element is a stacking context itself and nothing can ever go behind it. You can put stuff behind the <body> until you create a stacking context with it.
stack contetxt是一组元素，有一个共同的parent并且一起在z轴上上下移动
* html元素本身是一个stacking context，没有人能在他的下面，你可以将东西放在body下面。
4. 所有会触发生成stacking context的属性
（position为absolute或者relative，并且z-index不为auto，会生成一个stacking context）
像opacity，will-change，transform这样会生成composite layer的属性，也会触发生成stacking context。
将网页想象成一个大画布，元素会在上面进行绘制，如果元素经常变动位置，浏览器会不停的绘制，为了性能考虑，我们将这些属性的元素会创建合成层，想象合成层是独立于这个画布，在他们之上单独的一个部分，会使用GPU渲染。
