定位元素：position屬性值設置除默認值static以外的網頁設計元素，包括relative，absolute，fixed。平台：win/IE win/FFz-index用來確定定位元素在垂直於顯示屏方向（以下稱為Z軸）上的網頁設計層疊順序值：auto | 整數 | inherit默認：auto適用於：定位元素繼承性：no 理解stacking context每個box都歸屬於一個stacking context,它是元素在z軸方向上定位的網頁設計參考。根元素形成 root stacking context，其他stacking context由定位元素設置z-index為非auto時產生。如#div1{position:relative;z-index:0;}即可使 id=div1的網頁設計元素產生stacking context。stacking context和 containing block 並沒有必然聯繫。理解stack level在一個stacking context中的網頁設計每個box，都有一個stack level（即層疊級別，以下統一用stack level），它決定著在同一stacking context中每個box在z軸上的網頁設計顯示順序。同一stacking context中，stack level值大的網頁設計顯示在上，stack level值小的網頁設計顯示在下，同一stack level的網頁設計遵循後來居上的網頁設計原則（back-to-front ）。不同stacking context中，元素顯示順序以父級的網頁設計stacking context的網頁設計stack level來決定顯示的網頁設計先後情況。於自身stack level無關。注意stack level和z-index並不是統一概念。（將在後文慢慢理解）stack level規則每個stacking context中可包含塊級（block）元素、內聯（行內inline）元素，還有設置float屬性的網頁設計元素、定位元素等等他們在同一父級 stacking context中的網頁設計顯示順序是怎樣的網頁設計？即stack level是怎樣的網頁設計呢？比如一個塊級元素和內聯元素發生層疊的網頁設計話誰會在上面呢？是不是誰在後面誰就在上面呢？根據w3c關於 stack level 的網頁設計介紹可以得出以下stack level規則每個stacking context都包括以下stack level （後來居上）：1. 父級stacking context的網頁設計背景、邊界 2. z-index值為負值的網頁設計定位元素（值越小越在下） 3. 文本流中非定位的網頁設計、block塊級子元素 4. 文本流中非定位的網頁設計、float浮動子元素 5. 彷彿能產生stacking context的網頁設計inline元素6. 否則，inline元素的網頁設計stack level將在block元素之前。 7. z-index：auto/0的網頁設計定位元素 8. z-index值為正的網頁設計定位元素（值越大越在上） 以上stack level在瀏覽器執行情況：firefox3.0下測試完全吻合，firefox2.0下稍有不同即：「z-index值為負值的網頁設計定位元素」在「父級stacking context的網頁設計背景、邊界」之前。ie6.0和7.0中：inline元素的網頁設計stack level位於block元素之前，且「文本流中非定位的網頁設計、float浮動子元素」（以下簡稱浮動元素）和「文本流中非定位的網頁設計、block塊級子元素」（以下簡稱block元素）處於同一級。 測試FF下測試 HTML代碼網站架設 www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 網站架設 www.w3.org/1999/xhtml"> stack level 在火狐中的網頁設計測試 #container {position:relative;left:100px;z-index:0;background: purple;width:500px;} #container div {height:200px;width:200px;} #box-p-zn { position:relative;z-index:-1;background-color:yellow; top:-25px;left:-30px;} #box-block {background-color: aliceblue;margin-top:-30px;margin-left:150px;} #box-float {float:left;margin:-50px 100px 0 0;background-color: red;} #box-inline {background-color: gray;display:inline;padding:50px 0;} #box-p-za { position: absolute; top:50px;left:50px; background-color: green;} #box-p-zp { position: relative;z-index:1;background-color: greenyellow;} 這個box position:relative;z-index:1;定位元素z-index值為正 這個box position:absolute;z-index:auto;定位元素z-index值auto 這個box inline;inline元素 這個box float; 未定位的網頁設計浮動元素 ----這個box block;未定位的網頁設計塊級元素 這個box z-index:-1;定位元素z-index值為負 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]測試頁面： 點擊此測試文件(請分別在FF3.0和FF2.0中打開）代碼說明：由前所述，如果元素的網頁設計stack level同級則後來居上；元素的網頁設計stack level高，這無論代碼在文檔中位置如何都顯示在上面，即使代碼在最前面；如果元素的網頁設計stack level低，無論代碼位置如何都將顯示在下面，即使代碼在最後面。SEO們就根據這一點，以「3.文本流中非定位的網頁設計、block塊級子元素」和「4.文本流中非定位的網頁設計、float浮動子元素」為例，如果SEO把「float元素」 的網頁設計代碼寫在「block元素」的網頁設計前面，且實際顯示為：「float元素」在「block元素」之上。即可證明："float元素」的網頁設計stack level級別較「block元素」高。因為如果同級,或者「block元素」的網頁設計stack level高都應是「block元素」顯示在上。根據以上，根據標準中的網頁設計順序，把stack level高的網頁設計元素代碼寫在前面，stack level低的網頁設計代碼寫在後面，如果顯示結果是：代碼在前面的網頁設計元素顯示在上方 ，即證明上面的網頁設計stack level規則。測試結果：在FF3.0中結果和標準順序一致。FF2.0中「z-index值為負值的網頁設計定位元素」在父級stacking context的網頁設計背景下面。（注意ff2.0的網頁設計這個特殊性）IE下測試 HTML代碼網站架設 www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 網站架設 www.w3.org/1999/xhtml"> stack level 在IE中的網頁設計測試 #container {position:relative;z-index:0;background: purple;width:400px;} #container div {height:200px;width:200px;} #box-p-zn { position:relative;z-index:-1;background-color:yellow; top:-95px;left:55px;} #box-block {background-color: aliceblue;margin-top:-170px;margin-left:30px;} #box-float {float:left;margin:-50px 0px 0 35px;background-color: red;} #box-inline {background-color: gray;display:inline;padding:50px 0;margin-left:-10px;} #box-p-za { position: absolute; top:50px;left:50px; background-color: green;} #box-p-zp { position: relative;background-color: greenyellow;z-index:1;} 這個box position:relative;z-index:1; 這個box position:absolute;z-index:auto; 這個box float 這個box block 這個box inline; 這個box z-index:-1; [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]測試頁面： 點擊此測試文件(請在IE下瀏覽)代碼說明：此代碼也是根據上面的網頁設計測試思想，但由於inline元素在ie中的網頁設計特殊性，把inline的網頁設計代碼寫在了後面，事實證明結論是正確的網頁設計。對於「block元素」和「float元素」順序大家可以交換順序測試。測試結論：IE下（無論ie6.0或者ie7.0）「float元素」和「block元素」屬同一stack level，而「inline元素」較其stack level低。解釋：「float元素」，「z-index：auto的網頁設計定位元素」彷彿產生了新的網頁設計stacking context，但其真正能產生新的網頁設計stacking context的網頁設計後代任按其父級stacking context定位。（但IE中「z-index：auto的網頁設計定位元素」會擁有z-index值0，產生一個新的網頁設計stacking context，並影響其子元素定位。這是IE一個BUG）inline元素在FF中彷彿能產生新的網頁設計stacking context，而在IE中則不能。至此stack level規則內容已經完畢，現在應該能理解stack level和z-index的網頁設計不同。stack level來決定這一個stacking context中各元素在z軸上的網頁設計顯示順序，對於同一stack level的網頁設計定位元素才由z-index進一步決定顯示次序。一些問題的網頁設計解釋：在《z-index在IE中的網頁設計迷惑》一文中最後提到的網頁設計問題： HTML代碼網站架設 www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 網站架設 www.w3.org/1999/xhtml"> z-index在IE中的網頁設計迷惑 #box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; } 為什麼負值的網頁設計定位元素在IE和FF下顯示不一致呢？Why？ [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]演示地址： 點擊此文件認為： 引用內容解惑：IE瀏覽器似乎給body元素默認了一個相對定位屬性（position: relative）。真是這樣嗎？ HTML代碼網站架設 www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 網站架設 www.w3.org/1999/xhtml"> body 是否默認有position屬性 *{ margin:0; } html{ background:silver; } body{ height:200px; width:200px; background:green; text-align:right; /*ie中position:relative;加上這條試試*/ /*ff中opacity:0.99;加上這條試試*/ } div{ position:absolute; left:100px; top:100px; width:200px; height:200px; background:yellow; z-index:-1; } BODY:z-Index:0 DIV:z-Index:-1 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]演示地址： 點擊此文件分析box1顯示在body的網頁設計下方，根據上面的網頁設計stack level規則，IE中，如果body默認了一個位置屬性，即body是其父級stacking context，box1應顯示在其上方，事實卻不是這樣。而且當SEO們給body加上position：relative以後，顯示效果和stack level規則一致。所以body並沒有默認位置屬性。那為什麼負值的網頁設計定位元素在IE和FF下顯示不一致呢？ie 中根據stack level規則： z-index為負的網頁設計定位元素的網頁設計stack level比父級stacking context（此處是root stacking context）高，顯示在其上方。故box1在ie中能顯示。ff3.0和標準一致，也能顯示。大家可以試一下。ff2.0 中由於那條特殊的網頁設計stack level，即 z-index為負的網頁設計定位元素的網頁設計stack level比父級stacking context（此處是root stacking context）低，所以顯示在root stacking context下方。故不能看見。另外，上面的網頁設計代碼中加上opacity那條後，在ff2.0中即可顯示了。這又是什麼原因呢？推測：在火狐中如果給元素設置opacity屬性（1除外），即會產生新的網頁設計stacking context。上面加上opacity屬性後在ff2.0中可顯示box1在body下，ff3.0box1在body上，（可以根據上面的網頁設計stack level規則自己分析）符合推測。在w3c的網頁設計說明中也證明這點 引用內容In future levels of CSS, other properties may    introduce stacking contexts, for example 'opacity'    [CSS3COLOR]. 總結：在一個stacking context中元素的網頁設計z-軸顯示順序，由元素所處的網頁設計 stack level 決定。對於同一stack level的網頁設計定位元素由z-index的網頁設計大小進一步決定顯示次序。ie中給元素設置position屬性（static除外）可產生新的網頁設計stacking context ff中給元素設置opacity屬性（1除外）可產生新的網頁設計stacking context除此之外（也許設置其他屬性也會產生新的網頁設計stacking context，但還不知道）只有定位元素設置了z-index(auto除外)才會產生新的網頁設計stacking context，子元素將按照新的網頁設計stacking context，定位。相關文章/討論：z-index在IE中的網頁設計迷惑 Elaborate description of Stacking Contexts 負值z-index在IE中不再迷惑GOOGLE 的網頁設計翻譯：stacking context = 疊加背景，層疊背景 這樣比較好 台中網頁設計吧！(知道的網頁設計請幫忙解釋)static，relative，absolute，fixed = 靜態的網頁設計，相對的網頁設計，絕對的網頁設計，固定stack level = 堆棧水平，應該是 層疊級別 比較適當瀏覽器或CSS應該統一規範的網頁設計！每一家看的網頁設計都不同，連編輯器(DW)也有不同的網頁設計解釋！W3C真的網頁設計設來來好 台中網頁設計玩的網頁設計！