css层叠

最近在写代码，整到层叠上下文和图层相关的事情，然后发现自己对于CSS中的层叠相关的知识并没有自己想象中那样理解的透彻。因此花了一段时间重新学习了一下相关的知识。

• 层叠上下文（Stacking Context）
  网页及其每个元素都有一个坐标系统。该系统包括一个三维z轴，其中的元素是层叠（Stacked）的。z轴的方向指向查看者，x轴指向屏幕的右边，y轴指向屏幕的底部。
  通常，浏览器会按照CSS规范放置元素：

在DOM树中最先出现的元素被放在首位，之后出现的元素被放在前面的元素之上。但它并不总是那么简单。只有当页面上的所有元素是在文档流之中才起作用。也就是说，当没有元素在流中的位置被改变或者已经脱离文档流，才起作用。

CSS中有两种方式影响元素的流和位置：

• 使用position属性定位元素。除了默认的static值外的元素被称为定位元素
• 通过使用float属性浮动元素来改变元素的流

事实上，每个HTML元素都属于一个层叠上下文。给定层叠上下文中的每个定位元素都具有一个整数的层叠层级，具有更大堆栈级别的元素盒子总是在具有较低堆栈级别的盒子的前面（上面）。盒子可能具有负层叠级别。层叠上下文中具有相同堆栈级别的框根据文档树出现的顺序层叠在一起。

在CSS中可以使用z-index和transform可以改变元素的堆叠顺序。但也可能会导致一些奇怪的情况，比如具有较大的z-index的元素并不总是位于具有较低z-index元素的上方。在一些情况下，z-index有可能失效。

这个时候可以使用transform:translateZ()改变元素z轴的层级
Web中的任何元素都存在于一个三维空间中，除了大家熟知的平面画布中的x轴和y轴之外，还有控制第三维度的z轴，那么如何控制z轴

控制z是通过z-index和transform来实现的。先简单的了解一下这两种控制z轴的方法。

通过z-index控制z轴，需要配合position属性，且position的属性值为relative、absolute、fixed和sticky时。并且给z-index显式的设置数值，数值越大，其层级越高。简单点说，数值越高，元素越在顶上。
而transform可以通过它的translateZ()来改变元素的层叠顺序，其值越大，越在顶层，离屏幕越近。
不过通过transform:translateZ()改变元素z轴的层级，必须在元素的父元素中显示的设置transform-style: preserve-3d或者在transform中显示的设置perspective()。

不过在一些浏览器和设备上，当transform和z-index在一起使用时会发生异样，造成z-index失灵。至于为什么会失灵，
以及如何解决，这里就不多讲了
原文: [https://www.w3cplus.com/css/3d-transform-and-z-index.html]