很多時候我們做網頁設計的時候，總會遇到這樣的情況，有多個層，每個層希望他顯示在不同的地方，例如，客服漂浮，我們都希望他顯示在頁面組頂層，但是很多時候遇到某個DIV內容被其他層覆蓋擋住了，怎么辦呢？我們如何讓某一DIV層顯示在上面？其實，使用css屬性 z-index 就能解決問題。
下面我們弄個簡易的圖片來看下大概層顯示的示意：
設置z-index讓div層wrap2在上面
html代碼如下
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>z-index 設置層上下位置</title><style>.wrap1, .wrap2, .wrap3{width:200px; height:200px;}.wrap1{ background:#fcc; position:absolute; top:80px; left:200px; z-index:300; /* 設置層上下位置 */ }.wrap2{ background:#cfc; position:absolute; top:50px; left:150px; z-index:500; /* 設置層上下位置 */ }.wrap3{ background:#ccc; position:absolute; top:20px; left:100px; z-index:100; /* 設置層上下位置 */ }</style></head><body><div class="wrap1"> 這里是wrap1</div><div class="wrap2"> 這里是wrap2</div><div class="wrap3"> 這里是wrap3</div></body></html>
代碼分析：
1、設置三層上下位置的屬性是 z-index，數值小的在下面，數值大的在上面。
2、css屬性 z-index 兼容所有瀏覽器，不用擔心在IE8瀏覽器上不起作用。
注意問題：
在IE瀏覽器上，即使設置 z-index 也不能讓div位于下拉菜單控件 select 的上面，同樣也不能位于flash的上面，但是在Firefox、Chrome、360等主流瀏覽器上是沒有問題的。
JavaScript 語法是：
假如div的id是 div1 ，則Javascript就可以這樣寫：
注意 zIndex 的大小寫要正確。
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。該屬性設置一個定位元素沿z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。
z-index：auto | number
默認值：auto 堆疊順序與父元素相等
number：無單位的整數值，可為負數
JavaScript 語法： object.style.zIndex="1"
注意問題：
z-index 屬性適用于那些被定義了除 position:static 外任意屬性的元素中。即 z-index 僅能在定位元素上奏效（position: absolute | relative | fix）。
stacking context 堆疊上下文
每個定位元素都歸屬于一個stacking context（即堆疊上下文，以下統一用堆疊上下文），最初的堆疊上下文（即根部堆疊上下文）是由根元素產生（一般頁面的根元素是body），而其他的堆疊上下文則由定位元素產生（此定位元素的z-index 被定義一個非auto 的z-index 值），定位子元素會以這個基準堆疊上下文為參考，用相同的規則來決定層疊順序。
觸發stacking context
1. 定位元素并且定義了z-index為非auto；
2. FF, Safari, Chrome下元素設置opacity屬性（1除外）會產生stacking context；(除了Opera)
3. IE6,7下的定位元素，無論設置了z-index，或無論z-index設置成什么值，都會產生新的 stacking context。
stack level 堆疊級別
在一個堆疊上下文中的每個box ，都有一個stack level（即堆疊級別，以下統一用堆疊級別），它決定著在同一堆疊上下文中每個box 在z 軸上的顯示順序。同一堆疊上下文中，堆疊級別值大的顯示在上，堆疊級別值小的顯示在下，同一堆疊級別遵循后來居上的原則（back-to-front ）。不同堆疊上下文中，子元素顯示順序以父級的堆疊上下文的堆疊級別來決定顯示的先后情況。于自身堆疊級別無關。說白了就是父元素的堆疊上下文的堆疊級別決定了子元素堆疊級別將來的發展，父元素堆疊級別低，則子元素堆疊級別就必然比父元素堆疊級別高的子元素堆疊級別低，即使這個子元素在他父元素內部的堆疊級別再高也無濟于事。
z-index
頁面中元素在z軸方向上的排列，先由堆疊上下文決定，如果是相同的堆疊上下文那么由堆疊級別決定（后來居上原則），如果又是相同的堆疊級別（同一個父元素），則由z-index 決定。
這里最容易搞混的就是堆疊級別和z-index ，大多數時候覺得他們是同一個東西，而事實上他們還是有區別的，個人認為，當沒有z-index 時候，我們所依靠的準則是以堆疊級別的后來居上的原則來判定順序。如果在一個堆疊上下文，一般就是在body 下，倆個不同的z-index 的時候，以z-index 大小來判定上下順序，而我們平時印象里留意的最多的就是z-index ，所以往往誤解了堆疊級別和z-index 的區別。
上面洋洋灑灑寫了一大段，都是關于Z-INDEX的用法和介紹，應該來說是比較具體的了，有需要的朋友可以轉載或者收藏。
新聞熱點
疑難解答
