z-index 特性
知识点
- 设置z-index 必须先设置position(除开static属性)，不然没效果
- 如果父子元素都是设置了position，则子元素一定会覆盖父元素
- 不同元素间的比较，先比较父元素的兄弟元素间z-index的大小，如果父元素的z-index就比其他元素的z-index小，则子元素也会被其他元素覆盖
- z-index属性只有和定位元素(position不为static的元素)在一起的时候才起作用，可以是正数或负数。数值越大层级越高。
- flex盒子的子元素也可以设置z-index属性。
- 内联元素的层叠顺序要比浮动元素和块状元素高。
- 层叠准则：
谁大谁上：在同一层叠上下文领域，层叠水平值(z-index值)大的在上面。
后来居上：当元素的层叠水平一致、层叠顺序相同时，在DOM流中处于后面的元素会覆盖前面的元素。
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
- 每个层叠上下文和兄弟元素独立，当进行层叠变化或渲染时，只需要考虑后代元素。
- 对于position: relative / absolute以及Firefox/IE下含有position:fixed声明的定位元素，当其z-index值不为auto的时候，会创建层叠上下文
- z-index 负值的作用：
① 可访问性隐藏，只需在层叠上下文内的某一个父元素加个背景色即可；
② 多背景模拟；
③ 定位在元素的后面。
参考文章
CSS中z-index属性无效的问题
z-index层叠规则引发的小问题
