详解css z-index属性

       对于css的初学者而言，可能对z-index这个属性比较陌生，觉得这个属性平时使用较少。虽然它的使用频率不及margin、background等高，但在我们的网页设计中难免会遇到，下面小编就为大家详细介绍一下这个属性。

　　一、什么是css z-index属性

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

　　注意：z-index属性仅能在绝对定位 条件下奏效。

　　二、z-index语法与结构 

　　z-index 跟具体数字

　　如：

　　div{z-index:100}

　　注意：1.z-index的数值不跟单位。

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

　　三、z-index应用案例 

　　下面我们举一个简单的例子帮助大家理解z-index属性。

　　具体代码如下:

　　运行效果:

　　案例说明:

　　三个盒子均使用了绝对定位属性position:absolute样式，并赋予left、right属性不同值，让其错落有致。

　　通过代码和效果我们可以看出：第一个盒子z-index:10，所以重叠在最下层，而第二个盒子z-index:20，值最大所以最上层重叠，第三个盒子设置z-index:15，居中。

　　以上就是z-index属性的全部内容，是不是很简单？有了z-index，在制作一些需要实现列表拖拽的网站（比如电子相册，文件拖放，在线画图等）时会变得非常方便。如果您正在关注CSS3绘图的相关内容，那相信您也会发现，用了z-index之后，很多事情都会变得比原来简单不少。因此，掌握z-index的相关知识，对于实现网站的其他高难度需求将会很有帮助。