CSS中的z-index属性有什么用？？简单说明

html-css027

CSS中的z-index属性有什么用？？简单说明,第1张

当网页上出现多个由绝对定位（POSITION:absolute）或固定定位（POSITION:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。

z-index的意思就是在z轴的顺序，如果说网页是由x轴和y轴所决定的一个平面，那么z轴就是垂直于屏幕的一条虚拟坐标轴，浮动层就在这个坐标轴上，那么它们的顺序号就决定了谁上谁下了。

当你定义的CSS中有position属性值为absolute、relative或fixed，

用z-index此取值方可生效。

此属性参数值越大，则被层叠在最上面。

例子：

<html>

<head>

<style>

.z1,.z2,.z3{position:absolutewidth:200pxheight:100pxpadding:5px 10pxcolor:#ffftext-align:right}

.z1{z-index:1background:#000}

.z2{z-index:2top:30pxleft:30pxbackground:#C00}

.z3{z-index:3top:60pxleft:60pxbackground:#999}

</style>

</head>

<body>

<div class="z1">z-index:1</div>

<div class="z2">z-index:2</div>

<div class="z3">z-index:3</div>

</body>

</html>

上面三个CSS，将根据z-index的值决定谁在最上层！