這些文字是對上篇文章的一點補充，沒有什麼需要特別說明的，只是把一些“概念常識”整理一下。
仍然先做一個和上篇文章中紙牌式的效果或仍沿用那個效果：
［演示地址：http://www.doyoe.com/model/xhtmlcss/style/zindex/3.htm］
CSS部分：
div { position: absolute; color: #fff; width: 150px; height: 150px; border: 1px solid #ddd;}
.dy1 { top: 100px; left: 100px; background-color: #000; z-index: 1;}
.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 2;}
.dy3 { top: 160px; left: 140px; background-color: #050; z-index: 3;}
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">dy1</div>
<div class="dy2">dy2</div>
<div class="dy3">dy3</div>
</body>
</html>
我們試着把裏面的zIndex都去掉，然後看效果，發現和之前的是一模一樣的，那這意思是不是說zIndex是無意義的？這個一會再說。
CSS：
.dy1 { top: 100px; left: 100px; background-color: #000; }
.dy2 { top: 130px; left: 120px; background-color: #f00; }
.dy3 { top: 160px; left: 140px; background-color: #050; }
首先來看爲什麼不寫zIndex也會有相同的效果。是不是在不寫情況下，它們本身也具有了一個缺省的zIndex值，這個值是多少呢？
問題二：zIndex是否無存在意義？
問題三：每個元素是否都有一個zIndex初始值？這個值是多少？
要判斷是否真如上面所猜，其實非常簡單：
首先，給dy2加上zIndex，值任意，不過爲了節省點時間，可以取小點，就1吧。
.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 1; }
刷新，效果如上圖，dy2已經覆蓋在dy1和dy3之上了，這說明dy1和dy3的zIndex小於1，從而也回答了第二個問題，zIndex的存在並非無意義。但即使這樣，我們仍然不知道它們的zIndex值是多少。再更改dy2的zIndex爲0，發現又恢復了剛開始時的效果。
.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 0; }
這是不是說明剛開始的時候dy2的zIndex值就爲0呢？不急，再等等。更改dy2的zIndex值得爲-1。
dy2 { top: 130px; left: 120px; background-color: #f00; z-index: -1; }
IE：
FF：
此時IE中dy2已經跑到dy1和dy3的下面去了，FF中dy2則消失不見，但依然可以看出絕對是在dy1和dy3之下，因爲dy1和dy3之間沒有任何東西阻隔。
得出的結果是：-1<zIndex(dy2)缺省值<1，由此可見dy2的zIndex確實有個缺省值，而且這個是值就是0。因爲zIndex的值爲正負整數，而整數只有0纔會比-1大且比1小。
這時又有一個問題：dy1，dy3的zIndex缺省值又爲多少呢？從前面的測試裏可以知道：當dy2的zIndex爲1時，dy1，dy3都在dy2之下，由此可見zIndex(dy1)缺省值<1，zIndex(dy3)缺省值<1；當dy2的zIndex爲-1時，dy1,dy3都在dy2之上，所以zIndex(dy1)缺省值>-1，zIndex(dy3)缺省值>-1；顯而易見，zIndex(dy1)和zIndex(dy3)的缺省值居然也爲0，也就是說zIndex(dy1)=zIndex(dy2)=zIndex(dy3)=0，這是怎麼回事？既然都爲0，爲什麼還會有層疊效果？
既然是這樣，我們直接都給dy1，dy2，dy3加上一個z-index:0;
.dy1 { top: 100px; left: 100px; background-color: #000; z-index: 0;}
.dy2 { top: 130px; left: 120px; background-color: #f00; z-index: 0;}
.dy3 { top: 160px; left: 140px; background-color: #050; z-index: 0;}
果然，判斷沒有錯，效果是一樣的。那這是不是又說明，只要給它們的zIndex都賦一個相同的值，就會產生和zIndex順次增大同樣的效果？爲了讓結論更具說服力，需多測試幾次：於是把它們的zIndex值都改爲1，刷新，效果相同；改爲2，刷新，效果相同；改爲100，刷新，效果還是一樣。
由此可見，如果我們要求一層要覆蓋另一層時，只要不設置zIndex，默認的是會後面寫的層蓋在前寫的層上，且所有的元素在無外在作用情況下，其zIndex初始值都爲0。
