zIndex在實際應用中很是實用。不過也有些問題需要注意，很容易把頭都搞大。
當然，其實說什麼都是沒用滴，先用zIndex做個效果看看再說，首先得知道它都可以勝任哪些東東，這是比較重要的。
比如要做一個下面的撲克牌堆疊的效果，這是非常簡單的。撲克牌圖片網上隨便找就可以了，或者直接拿下面的這幾張。
效果如下圖：
［演示地址：http://www.doyoe.com/model/xhtmlcss/style/zindex/1.htm］
CSS部分：
div { position:absolute; color:#f00;}
.dy1 { z-index:1; top:100px; left:100px;}
.dy2 { z-index:2; top:140px; left:125px;}
.dy3 { z-index:3; top:180px; left:150px;}
.dy4 { z-index:4; top:220px; left:175px;}
.dy5 { z-index:5; top:260px; left:200px;}
img { float:left; margin-right:20px;}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飄零霧雨|[email protected]" />
<title>DY Css zIndex</title>
</head>
<body>
<div class="dy1"><img src="skin/1.jpg" alt="1" title="1" />← zindex1</div>
<div class="dy2"><img src="skin/2.jpg" alt="2" title="2" />← zindex2</div>
<div class="dy3"><img src="skin/3.jpg" alt="3" title="3" />← zindex3</div>
<div class="dy4"><img src="skin/4.jpg" alt="4" title="4" />← zindex4</div>
<div class="dy5"><img src="skin/5.jpg" alt="5" title="5" />← zindex5</div>
</body>
</html>
要注意的是，zIndex要生效就必須要使用position定位，關於這點可以參閱CSS手則對position幾個參數的說明。
從上面的效果圖可以看出，幾張牌的層疊順序，是由zIndex值來決定。zIndex的值越大，則疊在越外面。
問題一：zIndex的主從屬性是怎樣的？
比如說有幾個同級的塊dy1，dy2，dy3，它們的zIndex值分別是1，2，3，所以dy1<dy2<dy3，dy3在最外層。
這時塊dy2中包含有另外兩個子塊dy2-1，dy2-2，它們的zIndex分別是100，200。
按照一慣的思維，容易理解成塊的層疊順序完全取決於zIndex的大小，所以是dy1<dy2<dy3<dy2-1<dy2-2，dy2-2在所有塊的最外層。但結果真是這樣的嗎？ 我們不妨來寫個例子驗證一下。
首先我們要構造一個和上面所述情況一個環境：
CSS部分：
div {border:1px solid #ddd;position:absolute;color:#fff;}
.dy1,.dy2,.dy3 {width:150px;height:150px;}
.dy2-1,.dy2-2 {width:130px;height:50px;}
.dy1 {top:100px;left:100px;background-color:#000;z-index:1;}
.dy2 {top:130px;left:140px;background-color:#f00;z-index:2;}
.dy3 {top:160px;left:240px;background-color:#050;z-index:3;}
.dy2-1 {top:20px;left:10px;background-color:#aaa;z-index:100;}
.dy2-2 {top:50px;left:20px;background-color:#630;z-index:200;}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飄零霧雨|[email protected]" />
<title>DY Css zIndex</title>
</head>
<body>
<div class="dy1">zindex1</div>
<div class="dy2">zindex2
<div class="dy2-1">zindex100</div>
<div class="dy2-2">zindex200</div>
</div>
<div class="dy3">zindex3</div>
</body>
</html>
輸出效果：
［演示地址：http://www.doyoe.com/model/xhtmlcss/style/zindex/2.htm］
我們發現，zIndex值最大的dy2-2並沒有在最外層，而是被zIndex值僅爲3的dy3所遮蓋。
由此可見，層疊順序完全取決於zIndex的大小隻是在一般情況下才成立，並不是適用於任何情況。從這個例子中，可以得出結論是dy2-1和dy2-2都遵循了其父層dy2的zIndex，而他們本身的zIndex值只在dy2內部起作用。