CSS 之z-index属性

今天做web项目的时候，由于不同控件css冲突，导致两个元素显示时叠层顺序出现错误。最后通过浏览器调试，找到了错误原因并顺利解决。

错误原因：

本来显示在底层的元素，z-index属性设置为2；而本该显示在顶层的元素，z-index属性为1。

解决方法：

把底层元素z-index属性设置为0。

说实话，当时找到是因为z-index属性导致错误的时候，是一脸懵的。。。作为一个服务器开发人员，除了最常用的几个css属性之外，emmmm一言难尽。

 

以下补充z-index的定义和用法：

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

• 元素可拥有负的 z-index 属性值。
• Z-index 仅能在定位元素上奏效（例如 position:absolute;）。

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

可能的值：

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。