CSS----z-index 属性详解

用途:

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。

注意:

z-index 属性值可以是负的, 如果为正数，则离用户更近，为负数则表示离用户更远。

z-index 仅能在定位元素上奏效（position:relative/absolute/fixed;）

这个属性不会作用于窗口控件，如select对象。

可能的属性值:

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值,任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

不使用 z-index时堆叠顺序

不使用z-index的情况，也是默认的情况，即所有元素都不用z-index时，堆叠顺序如下(序号越大优先级越高):

1. 根元素（即HTML元素）的background和borders
2. 正常流中非定位后代元素
3. 已定位后代元素

即所有定位元素的优先级高于非定位元素, 

但非定位元素和非定位元素之间和 定位元素和定位元素之间的顺序取决于HTML文档出现顺序, 靠后的优先

浮动z-index堆叠顺序

浮动元素z-index位置介于非定位元素和定位元素之间, 堆叠顺序如下(序号越大优先级越高):

1. 根元素（即HTML元素）的背景和border
2. 正常流中非定位后代元素
3. 浮动元素
4. 正常流中inline后代元素
5. 已定位后代元素

​​​​​​​​​​​​​​

浮动元素之间是不会出现z-index重叠的

非定位元素和非定位元素之间和 定位元素和定位元素之间的顺序同上取决于HTML文档出现顺序, 靠后的优先

z-index元素之间的堆叠顺序

再次强调z-index只适用于已经定位的元素（即position:relative/absolute/fixed）

简单来说就是z-index的值越大优先级越高越靠上, 但是事实上没这么简单

 

子元素的z-index值只在父元素范围内有效,什么意思呢? 

每一个定位元素都归属于一个stacking context。根元素形成root stacking context，而其他的stacking context则由定位元素产生（此定位元素的z-index被定义一个非auto的z-index值），定位子元素会以这个local stacking context为参考，用相同的规则来决定层叠顺序。

当stacking context一样的时候，就用z-index的值来决定怎样显示，如果z-index也相同（即stack level相同），则按照档中后来者居上的原则（back-to-front ）的顺序来层叠。

举个例子:

定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟关系（z-index:200）。你会发现无论A1的z-index是多大，也会被z-index是200的B所覆盖，因为A的z-index只有100。

 

z-index的堆叠顺序是比较复杂的, 本篇只介绍一些简单的堆叠顺序, 推荐一个比较详细的说明:

https://www.cnblogs.com/starof/p/4424926.html