對于網站建設所有定位，最后都不免遇到這樣一種情況：兩個元素試圖放在同一個位置上。顯然，其中一個必須蓋住另一個——不過，如何控制哪個元素放在“上層”呢？這就引人了屬性z-index.
z-index
值：<integer> | auto | inherit
初始值auto
應用于定位元素
繼承性 無
計算值 根據指定確定
利用z-index，可以改變于網站建設元素相互覆蓋的順序。這個屬性的名字由坐標系統得來，其中從左向右是x軸，從上到下是y軸。在這種情況下，第三個軸一即從前向后，或者如果網頁設計人員愿意，也可以理解為越來越遠離用戶——則稱為z軸。因此，使用z-index 為元素指定沿z軸的值，并相應表示。圖10-52描述了這個坐標系。
在這個坐標系中，有較高z-index值的元素比z-index值較低的元素離讀者更近。這會導致有較高z-index值的元素覆蓋其他元素，如圖10-53所示，這是圖10-52的正面圖。這也稱為疊放。
所有整數都可以用作為z-index的值，包括負數。如果為元素指定一個負z-index值，會將其移到到離讀者更遠的位置。也就是說，它會移到疊放棧的更低層?？紤]以下樣式，如圖10-54所示：
p#first {position: absolute; Cop: 0; left: 0;
width: 20%; height: 10em; z-index: 8;}
p#second {position: absolute; top: 0; left: 10%;
width: 30%; height: 5em; z-index: 4;}
圖10-52: z-index疊放的概念視圖
圖10-53：元素如何疊放
p#third {position: absolute; cop: 15%; left: 5%;
width: 15%; height: 10em; z-index: 1;}
p#fourth {position: absolute; top: 10%; left: 15%;
width: 40%; height: l0em; z-index: 0;}
圖10-54：疊放元素可能相互重疊
每個網站建設元素都按照其樣式定位，不過，z-index值修改了以往的疊放順序。假設段落按數字順序指定，一個合理的疊放順序可能是（從低到高）p#first、p#second. pttthird、p#fourth。這會把p#first放在另外三個元素的下面，而把p#fourth放在所有元素的最前面?，F在，因為有z-index屬性，疊放順序則在你的控制之下。
如前例所示，沒有特別要求z-index值是連續的?？梢灾付ㄈ魏握麛?。如果想確定一個元素必定在所有其他元素的前面，可以使用以下規則：z-index: 100000。大多數情況下，這都能滿足你的要求，不過，如果把另一個元素的z-index聲明為100001 （或更高），該元素則會出現在前面。
—旦為一個元素指定了z-index值，該元素就會建立自己的局部疊放上下文。這意味著，元素的所有后代相對于該祖先元素都有其自己的疊放順序。這非常類似于元素建立新包含塊的方式。給定以下樣式，可以看到如圖10-55所示的結果：
p {border: 1px solid; background:#DDD; margin: 0;}
b (background:#808080;}
em {background:#BBB;}
#one (position: absolute; cop: 0; left: 0; width: 50%; height: 10em; z-index: 10;}
#two {position: absolute,- top: 5em; left: 25%; width: 50%; height: 10em; z-index: 7;}
#Chree {position: absolute; top: Hem; left: 0; widtrh: 50%; height: 10em; z-index: 1;}
#one b {position: absolute; right:-5em; top: 4em; width: 20em; z-indexs -404;}
#two b {position: absolute; right:-3em; top: auto; z-index: 36;}
#two em tposition: absolute; bottom:-0.75em; left: 7em; right:-2em; z-index:-42;}
Kthree b {position: absolute; left: 3em; top: 3.5em; width: 25em; z-index: 23;}
圖10-55：定位元素建立局部疊放上下文
注意b和em元素在疊放順序中的位置。當然，這些元素都相對于其父元素準確定位，不過，要特別注意P#two的子元素。盡管b元素在其父元素前面，而em在后面，但它們都在p#three的前面！這是因為z-index值36和-42都相對于p#two，而不是相對于總的文檔。從某種意義上講，P#two及其所有子元素都有共同的z-index值7，而在這個P#two上下文中各元素又有其自己的“次級”z-index。
換句話說，就好像b元素的z-index為7,36，而em的z-index值為7,-42，這些只是網站建設的反映概念值，規范中沒有相應的規定。不過，這樣的系統有助于說明如何確定總的迭放順序。請考慮：
p#one 10
p#one b 10,-404
p#two b 7,36
p#two 7
p#two em 7,-42
p#three b 1,23
p#three 1
這個概念框架準確地描述了這些元素以何種順序疊放。從這個疊放順序來看，盡管一個網站建設的元素后代可能在該元素的上面或下面，但它們與其祖先元素都歸為一組。
如果一個元素為其后代元素建立了疊放上下文，而且該元素位于此上下文z軸的0位置上，也是如此。因此，可以將框架擴展如下：
P#one 10,0
p#one b 10,-404
P#two b 7,36
P#two 7,0
P#two em 7,-42
p#three b 1,23
p#three 1,0
還有一個值要分析。規范對默認值auto有以下說明：
當前疊放上下文中生成框的棧層次與其父框的層次相同。這個框不會建立新的局部4放上下文。(CSS2.1: 9.9.1)
因此，如果元素設置為z-index: auto，可以將其處理為z-index: 0。不過現在你可能想知道，如果一個元素是初始包含塊疊放上下文的一部分，而且其z-index值為負，此時會發生什么情況。例如，可以想想看以下規則會得到什么結果：
<body>
<p style="position: absolute; z-index:-1;">Where am I?</p>
</body>
根據疊放規則，body元素與其父元素框在同一個迭放上下文中，因此將是0。它不會建立一個新的疊放上下文，所以絕對定位的P元素與body元素置于相同的迭放上下文中（即初始包含塊的疊放上下文）。換句話說，段落放在body元素的后面（被body元素蓋?。?。如果body有不透明的背景，這個段落會消失。
不過，只是CSS2中會如此。在網站建設CSS2.1中，疊放規則有所改變，要求元素絕對不會迭放在其鲞放上下文的背景之下。換句話說，考慮以下情況，body元素為其后代建立了一個包含塊（例如，假設它是相對定位元素）。作為body元素后代的一個絕對定位元素就不能疊放在body的背景之下，不過可以迭放在body的內容下面。
寫作本書時，即使將body和html元素都設置為有透明的背景，Mozilla和相關瀏覽器也會完全隱藏段落。這種做法是錯誤的。即使body有背景，其他用戶代理也會把段落放在body的背景之上。根據CSS2.1，這才是正確的行為。由于用戶代理的做法不同，所以z-index值為負時會導致不可預料的后果，所以使用要小心，
當前文章標題：網頁設計中Z軸上的放置
當前URL：http://www.ccaudelo.com/news/wzzz/Z axis-placed.html
上一篇：網頁設計中替換元素的放置和大小
下一篇：網頁設計中的固定定位
