光是使用 z-index 語法其實還不足以製做出區塊或圖片的堆疊效果，因為 z-index 僅能設定區塊的 z 軸位置，還必須搭配上 position 語法來設定區塊的位置，才能做出疊在一起的效果，以下範例就是 z-index 與 position 的簡單特效。
CSS z-index 基本語法
z-index: 屬性值;
CSS z-index 的屬性值共有三種選擇，分別是 auto、數字以及 inherit，屬性效果如下- z-index:auto; // 預設值，推疊的順序與父層一樣。
- z-index:number; // 根據 number 決定堆疊順序，數字越大代表越上層。
- z-index:inherit; // 繼承自父層的堆疊順序
CSS z-index 範例一、與 position 搭配範例
<style type="text/css">
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
這裡是文字介紹<img src="範例圖片">
呈現效果img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
這裡是文字介紹<img src="範例圖片">
這裡是文字介紹
CSS z-index 範例二、多張區塊重疊效果
<style type="text/css">
#p1{
position:absolute;
top:10px;
left:10px;
width:150px;
height:150px;
background-color:#00dc03;
z-index:1;
}
#p2{
position:absolute;
top:20px;
left:20px;
width:150px;
height:150px;
background-color:#fdff55;
z-index:2;
}
#p3{
position:absolute;
top:30px;
left:30px;
width:150px;
height:150px;
background-color:#ff1c19;
z-index:3;
}
</style>
<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>
呈現結果#p1{
position:absolute;
top:10px;
left:10px;
width:150px;
height:150px;
background-color:#00dc03;
z-index:1;
}
#p2{
position:absolute;
top:20px;
left:20px;
width:150px;
height:150px;
background-color:#fdff55;
z-index:2;
}
#p3{
position:absolute;
top:30px;
left:30px;
width:150px;
height:150px;
background-color:#ff1c19;
z-index:3;
}
</style>
<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>
注意看三個彩色的方型區塊疊在一起的效果，每個方型區塊靠上方與靠左邊的位置都不一樣，但是都是設為絕對位置，搭配 z-index 設定不同的值（分別是 1、2、3）而產生的效果。
延伸閱讀