使用top和left属性可能会造成元素相互重叠在一起，此时可以使用z-index属性。z-index属性用来控制重叠元素的显示顺序，值较高的元素将覆盖值较低的元素。如果使用值-1，则表示元素将至于页面默认文本的后面，这对于设置背景图案是很有用的。如果把电脑屏幕看作X-Y平面的话，那么z轴就是垂直于屏幕的。必须注意的是：z-index属性在设置了position并取值为“absolute”或“relative”时有效。
下面的代码中，分别使用了三个div元素，三个div元素的position属性都设置为absolute，偏移位置、z-index值各不相同。
①案例HTML代码：
<!DOCTYPE html>
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="test.css"/></head><body><div id="box"> <div id="top"> <img src="top.jpg" alt="top"/> </div> <div id="middle"> <img src="middle.jpg" alt="middle"/> </div> <div id="bottom"> <img src="bottom.jpg" alt="bottom"/> </div></div></body></html>
①案例CSS代码：
#box{
width:500px; height:600px; border:3px dashed #000;}#top{ position:absolute; left:170px;top:170px; z-index:3;}#middle{ position:absolute; left:100px;top:100px; z-index:2;}#bottom{ position:absolute; left:40px;top:40px; z-index:1;}
实现效果：
