今天搜索资料时，忽然发现了以前没注意的一个知识点，所以拖过来搞一搞，这个知识点叫做CSS的7阶层叠水平
在说这个知识之前，我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平
这个东西就是z-index属性（此篇为上篇，仅仅讲z-index）
基本含义：
z-index通俗来说就是在Z轴上的索引，Z轴是垂直于电脑屏幕的一根轴
用来设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，即通常情况下，z-index为2的元素会在z-index为1的元素上面
取值情况：
z-index有三个取值
auto：默认。堆叠顺序与父元素相等。
number：设置元素的堆叠顺序。
inherit：规定应该从父元素继承 z-index 属性的值。
特性：
1.支持负值（如果为正数，则离用户更近，为负数则表示离用户更远。）
2.支持CSS3 animation动画；（并没什么实用应用场景）
3.在CSS2.1时代，需要和定位元素配合使用，如果不考虑CSS3，只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用！在CSS3中有例外
准则：
1.后来者居上原则
<html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<style> ???.a{ ???????position: absolute; ???????height: 400px; ???????width: 400px; ???????background-color: yellow；
???} ???.b{ ???????position: absolute; ???????height:400px; ???????width: 400px; ???????background: red; ???????margin-left: 100px; ????????} ???</style></head><body> ???<div class="a"></div> ???<div class="b"></div></body></html>运行结果：
解析：我们可以看到，红色作为后来的元素覆盖在之前的元素上了，在未设置z-index的前提下，后来元素会覆盖前面添加到元素，当然实在开启了绝对定位的前提下（不开启绝对定位不能直观的看到效果）
2.谁大谁先上原则
在.a添加z-index:2,在.b添加z-index:1
运行结果：
解析：通常情况下，z-index越大，层级越高，越在上面
当发生嵌套时，祖先优先原则
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<style> ???.a{ ???????position: absolute; ???????height: 400px; ???????width: 400px; ???????background-color: yellow; ???????z-index: 2; ???} ???.b{ ???????position: absolute; ???????height:400px; ???????width: 400px; ???????background: red; ???????margin-left: 100px; ???????z-index: 1 ????????} ???.a1{ ???????position: absolute; ???????height: 200px; ???????width: 200px; ???????background-color: aqua; ???} ???.b1{ ???????position: absolute; ???????height: 200px; ???????width: 200px; ???????background-color: blue; ???????z-index: 100 ???} ???</style></head><body> ???<div class="a"> ???????<div class="a1"></div> ???</div> ???<div class="b"> ???????<div class="b1"></div> ???</div></body></html>运行结果：
解析：按照前面所说应该是蓝色的格子会在最上面，这里并没有，原因就是祖先优先原则
a的层级大于b的层级，所以a里面的元素会始终在b的上面，即使b的子元素的z-index为10000也没用
注意：
所有主流浏览器都支持 z-index 属性
任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
CSS中层叠和CSS的7阶层叠水平（上篇）
原文地址：https://www.cnblogs.com/suihang/p/10428754.html