1.属性特点
z-index属性是用来控制元素的堆叠顺序，z-index的值越大，元素的层级越高。当元素重叠时，层级高的会覆盖在层级低的上面，使层级低的元素的重叠部分被遮盖住。
2.取值范围
z-index属性的值分为三种：auto（默认值）：与父元素的层级相等，如各级祖先元素均未设置该属性，则类似于0、number：整数数值，在兼容所有浏览器的取值范围是 -2147483584 ~ 2147483584，数值越大，层级越高，数值越小，层级越低、inherit：继承父元素的z-index的属性值。
3.适用范围
z-index属性只能在设置了position: relative | absolute | fixed的元素和父元素设置了 display: flex属性的子元素中起作用，在其他元素中是不作用的。
4.从父属性
当父元素设置了z-index属性时，子元素的z-index属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的z-index属性值为准进行对比，子元素本身的z-index属性值无效。
当父元素未设置了z-index属性，子元素的z-index属性与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以元素本身的z-index属性值为准进行对比
5.举例说明
1.普通例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box1 { width: 200px; height: 200px; background: #f00; position: absolute; left: 0px; top: 0px; z-index: 2; } .box2 { width: 400px; height: 400px; background: rgb(0, 255, 123); position: absolute; left: 50px; top: 50px; /*定层 */ z-index: 1; } .box3 { width: 600px; height: 600px; background: rgb(55, 0, 255); position: absolute; left: 100px; top: 100px; /*定层 */ z-index: 3; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html> <!-- 场景：改变定位元素的层级 属性名：z-index 属性值：数字 数字越大，层级越高 -->
这个例子很简单，很容易看出，z-index的取值越大，层级越高（层级高的覆盖层级低的）。
2.从父例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> * { margin: 0; padding: 0; } .father1 { width: 200px; height: 200px; background-color: red; position: relative; z-index: 2; } .father2 { width: 200px; height: 200px; background-color: green; position: relative; top: -30px; left: 30px; z-index: 1; } .son1 { width: 100px; height: 100px; background-color: blue; position: absolute; left: 110px; top: 143px; z-index: 1; } .son2 { width: 100px; height: 100px; background-color: yellow; position: absolute; left: 51px; top: 7px; z-index: 6; } </style> <body> <div class="father1"> <div class="son1"></div> </div> <div class="father2"> <div class="son2"></div> </div> </body> </html>
从这个例子可以看出它的从父属性
当父元素设置了z-index属性时，即认为设置了一个结界，父元素里面的子元素z-index只跟自己结界内有关，结界内子元素比较遵循以下原则：
1、子元素无论是否设置z-index或者设置值比父元素小，层级一定都在父元素之上。所以例子里的蓝在红的上面，黄在绿的上面。因为两个父级元素中红大于绿，所以红在绿上面。所以总体排序为蓝，红，黄，绿。（这个例子懂了，从父属性就懂了）
2、子元素的z-index属性只与结界内元素对比有意义，如子元素未设置z-index则视为0。结界外的元素只会与父元素z-index比较，根据层级大小整体覆盖在父元素的上面或整体垫底在父元素的下面，不会参与结界内部z-index排序。
3、当父元素未设置z-index属性，不会生成结界，默认父元素z-index=0，父元素会参与子元素的z-index排序。
4、相同的z-index值比较，元素书写顺序在后面的层级高于前面的。
