使用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;
}
實現效果：
