首頁 > 開發者 > CSS

CSS樣式表中z-index使用方法總結

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

CSS 中的 z-index 屬性用於設定節點的堆疊順序, 擁有更高堆疊順序的節點將顯示在堆疊順序較低的節點前面, 這是我們對 z-index 屬性普遍的認識. 與此同時, 我們總是對堆疊順序捉摸不透, 將 z-index 的值設得很大也未必能將節點顯示在最前面. 本文將通過一些例子對 z-index 的使用方法進行分析, 並且為各位帶入 z-index 層級樹的概念.

Z-index是什麼意思？在CSS2.0中，Z-index 屬性用來設定元素的堆疊順序，擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面（Z軸）。

1、CSS樣式表中Z-index屬性的一些特徵：

•Z-index屬性的預設值是0
•元素可擁有負的 z-index 屬性值，如z-index:-1
•Z-index屬性無繼承性
•Z-index屬性JavaScript 使用文法：object.style.zIndex=”1″
•幾乎所有主流瀏覽器都支援 Z-index 屬性

2、CSS樣式表中Z-index屬性的使用方法：
樣式代碼：

 代碼如下 複製代碼

.box{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

前台效果：

css樣式表中z-index屬性的使用
3、CSS樣式表中Z-index屬性使用的注意事項：
（1）Z-index僅對定位元素有效（如position:relative）；
（2）Z-index只可比較同級元素。這也許是大家很容易忽視的問題，我就卡在了這裡。也就是說，Z-index只能對同級元素進行分層展示；
（3）Z-index的範圍：假設A和B兩個元素都設定了定位（相對定位、絕對位置、一個相對一個絕對位置都可以），且是同級元素，樣式為

.boxA{z-index:4}
.boxB{z-index:5}
於是，不難看出，元素B的層級要高於元素A，在此需要指出的是，A元素下面的子項目的層級也同樣都低於B元素裡的子項目，即使你將A元素裡的子項目設為z-index:9999；同理元素B裡的子項目，即使是設的z-index:1它照樣比元素A的層級要高；
（4）這個屬性不會作用於視窗控制項，如select對象。

以上關於Z-Index的總結都是個人通過解決實踐過程中遇到的問題而得出，希望能給遇到CSS樣式表中Z-Index問題的朋友有所指引。

關於 z-index, 目前遇到的一些問題

1.某些瀏覽器下元素層級遮蓋存在 bug.
2.某個元素 z-index 設的太大, 導致始終無法被遮蓋.
3.JavaScript 動態計算 z-index, 導致元素覆蓋關係部可控.
層級遮蓋 bug 出現的原因
1.IE6/7 對 z-index 的表現跟 IE8 及以上瀏覽器不一致.
2.position 值為非 static 時, 如果不設定 z-index 屬性, IE6/7 下 z-index 預設為 0, 而 IE8 及以上瀏覽器 z-index 為 auto, 且 zindex:auto 的元素不參與堆疊優先順序比較.

z-index IE6/7 IE8/9 Firefox/Chrome
不設定 0 auto auto
number number number number

層級關係的比較

先看幾點結論:

1.對於同級元素, 預設 (或 position:static) 情況下文檔流後面的元素會覆蓋前面的.
2.對於同級元素, position 不為 static 且 z-index 存在的情況下 z-index 大的元素會覆蓋 z-index 小的元素, 即 z-index 越大優先順序越高.
3.IE6/7 下 position 不為 static, 且 z-index 不存在時 z-index 為 0, 除此之外的瀏覽器 z-index 為 auto.
4.z-index 為 auto 的元素不參與層級關係的比較, 由向上遍曆至此且 z-index 不為 auto 的元素來參與比較.
在上面 2 點結論的基礎上, 我們引入定位樹(非 W3C 官方詞彙) 的概念來做層級的比較. 在定位樹這個概念下, 瀏覽器在渲染 DOM 節點時, 除了產生 DOM 樹之外, 還會根據 DOM 樹中的定位元素 (position 不為 static) 產生定位樹.

DOM 樹 (左上), 定位樹 (右下) 對比如下圖 (其中邊上有紅色圓圈的表示該元素 position 不為 static).

 
可以這樣理解：定位樹中包含了 DOM 樹中 position 不為 staitc 的全部元素. 而非同級元素比較層級關係可以比較如下.

•向上遍曆定位樹的父節點直到 2 個元素為同級元素.
•根據上面的結論來最最後的比較, 層級高的元素會越靠近使用者的顯示器並能覆蓋層級低的元素

 

 代碼如下 複製代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
#king_of_diamonds {
    position: relative;
    background-color:gray;
    width:30px; height:30px;
    left: 145px;
    top: 145px;
}
#ace_of_diamonds {
    position:relative;
    background-color:blue;
    width:300px; height:300px;
    left: 160px;
    top: 130px;
    z-index: 1;
}
       
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="king_of_diamonds">
    a
    </div>
    <div id="ace_of_diamonds">
    b
    </div>
    </form>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More