【CSS学习】--- z-index属性
一、前言
网页显示实际上是三维的，我们直观看到的有x轴和y轴，但在网页布局上还有一个z轴。
对于定位元素，我们使用top、right、left、bottom来实现元素在x-y平面上的定位，但为了表示布局的三维立体概念，还引入了z-index，z-index属性用来设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上方。
z-index有三个参数：
- auto：默认值，相当于未设置z-index，可看作z-index: 0
- number：无单位数字，用来设置z-index大小
- inherit：继承父元素的z-index属性值
举个小栗子热热身
<div style="width: 100px; height: 100px; background-color: red; position: relative;"></div> <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>
第二个div向上移动50px，与第一个div产生了重叠部分，显示情况如下：
第二个div显示在了第一个div上方，也就是重叠部分第二个div遮住了第一个div，现在给第一个div添加z-index属性：
<div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 1;"></div> <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>
我们将第一个div的z-index属性设置为1
这时我们发现第一个div遮住了第二个div，下面我们将逐步介绍定位元素属性z-index。
二、z-index只对定位元素奏效
定位元素（position 属性值为 relative 或 absolute 或 fixed）可以理解为具有x、y、z坐标的元素。如果定位元素没有显示给出z-index属性，那么它的z-index默认值为0。
如果一个元素不是定位元素，那给它设置z-index属性也是无效的。
栗子来了
<div style="width: 100px; height: 100px; background-color: red; z-index: 5;"></div> <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: 1;"></div>
第一个div的z-index设置为5，第二个div的z-index设置为1
我们看到第二个div覆盖了第一个div，虽然第一个div的z-index属性值更大，但它不是定位属性，所以它的z-index不起作用。
三、非定位元素与非定位元素，以及相同z-index的堆叠顺序比较
如果两个元素都为非定位元素，或者两个定位元素的z-index值相等，那么按照文档流的顺序，后写的元素将覆盖先写的元素。
两个栗子接住
1. 两个都未设置z-index的定位元素
<div style="width: 100px; height: 100px; background-color: red; position: relative;"></div> <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>
后写的这个div（背景为black）覆盖了先写的div（背景为red）
2. 两个非定位元素
<div style="width: 100px; height: 100px; background-color: red;"></div> <div style="width: 100px; height: 100px; background-color: black; margin-top: -50px;"></div>
后写的这个div（背景为black）覆盖了先写的div（背景为red）
四、定位元素与非定位元素的堆叠顺序
如果定位元素未设置z-index或者z-index为正数，那么此类该定位元素的堆叠顺序大于非定位元素；如果定位元素z-index为负数,那么此类定位元素堆叠顺序小于非定位元素。
栗如
第一个定位元素div的z-index为正数，第二个为非定位元素div，第一个定位元素div的z-index为负数
<div style="width: 100px; height: 100px; background-color: green; position: relative; top: 50px; z-index: 1"></div> <div style="width: 100px; height: 100px; background-color: red;"></div> <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: -1;"></div>
z-index为正数的定位元素覆盖了非定位元素，非定位元素覆盖了 z-index为负数的定位元素
五、父子及兄弟的堆叠顺序
1. 如果父元素设置了z-index且不是默认值auto，无论子元素的z-index为何值，子元素堆叠顺序永远大于其父元素；
<div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px; z-index: 100"> <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -10;"></div> </div>
虽然子div的z-index值小于其父div，但子div仍显示在了父div的上方
2. 如果父元素未设置z-index或值为auto，那么当子元素z-index为负数时，父元素堆叠顺序将大于子元素，否则子元素堆叠顺序大于父元素
<div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;"> <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -1;"></div> </div>
父元素未设置z-index，子元素z-index为-1，可以看到子元素被父元素覆盖了
3. 无论父元素的z-index如何，兄弟元素间的z-index值都可相互比较，z-index值越大堆叠顺序越高
<div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;"> <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div> <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 1; top: -50px;"></div> </div>
第一个子元素的z-index大于第二个子元素的z-index，所以第一个子元素覆盖第二个子元素
3. 对于父元素及兄弟元素之外的其它元素，子元素的堆叠顺序由其父元素的z-index决定。
<div style="position: relative; z-index: 10;"> <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div> </div> <div style="position: relative; z-index: 5;"> <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 3; top: -50px;"></div> </div>
尽管背景为红色的子div元素z-index小于背景为黑色的子div元素，但红色仍覆盖了黑色，就是因为红色div的父元素z-index大于黑色div的父元素
所以无论黑色子div的z-index多大，它的堆叠顺序始终小于红色div
六、最后
感谢博主谦行的博客：z-index应用简单总结。
如有错误或不足之处还望指出探讨，十分感谢！
