z-index优先级总结_html/css_WEB-ITnose

因为显示器显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别，表示一个元素在叠加顺序上的上下立体关系。

可能的值：

注释：  所有主流浏览器都支持 z-index 属性。任何的版本的 Internet Explorer （包括 IE8）都 不支持属性值  "inherit"。

           IE6/7下position不为static，且z-index不存在时 z-index为0，除此之外的浏览器z-index为auto。

          z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。

概念：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 z-index 仅能在定位元素上奏效。

演示：

1. 两个div，无设置z-index，第二个粉色div向上移动50px时，正常显示如下图。