有時候我們會使用CSS中的z-index屬性來使某些塊狀元素更有層次感。
如下圖：可以通過z-index實現鼠標居於文字後面，使得網頁更有層次感
實現上面效果的代碼如下：
- <span style="font-size:24px;"><html>
- <head>
- <style type="text/css">
- img.x
- {
- position:absolute;
- left:0px;
- top:0px;
- z-index:-1
- }
- </style>
- </head>
- <body>
- <h1>這是一個標題</h1>
- <img class="x" src="/i/eg_mouse.jpg" />
- <p>默認的 z-index 是 0。Z-index -1 擁有更低的優先級。</p>
- </body>
- </html>
- </span>
但是好多剛學習css的新手們，會對z-index屬性有些不解，明明自己設置了z-index屬性，但是問什麼看不到任何效果呢？
要解決這個問題就要去w3c上去看下官方定義：
這裏需要特別說明的是：Z-index只能工作在被明確定義了absolute，fixed或relative 這三個定位屬性的元素中，如果沒有定義position屬性，則z-index屬性不起作用。
所以Z-index 僅能在定位元素上奏效（例如 position:absolute;）
用下面的代碼和圖解來給大家做一下對比：
1，代碼中沒有定義position屬性
- <span style="font-size:24px;"><!DOCTYPE html>
- <html>
- <head>
- <title>學習認識z-index</title>
- <meta charset="utf-8">
- <style type="text/css">
- #box{
- width: 1000px;
- height:1000px;
- border: 1px royalblue solid;
- }
- #box1{
- background-color: red;
- width: 200px;
- height: 200px;
- z-index: 999;
- }
- #box2{
- background-color: yellow;
- width: 200px;
- height: 200px;
- margin-left: 150px;
- z-index: 99;
- }
- #box3{
- background-color: green;
- width: 200px;
- height: 200px;
- margin-left: 300px;
- z-index: 9;
- }
- </style>
- </head>
- <body>
- <div id="box">
- <div id="box1">
- <span >我的z-index爲999</span>
- </div>
- <div id="box2">
- <span >我的z-index爲99</span>
- </div>
- <div id="box3">
- <span >我的z-index爲9</span>
- </div>
- </div>
- </body>
- </html>
- </span>
顯示結果如下圖：
從上圖中我們可以看出，明明我們設置了z-index屬性，但是爲什麼沒有出現任何層疊效果呢？這也就是大多數新手會遇到的問題，這時我們就要認證去W3C閱讀關於z-index的規則了，在上面的W3C規則中有一句話，大家一定要謹記：“Z-index 僅能在定位元素上奏效（例如 position:absolute;）”
下面我們就在代碼中加上position:absolute;屬性來看看顯示效果：
2，定義了position:absolute;屬性的代碼：
- <!DOCTYPE html>
- <html>
- <head>
- <title>學習認識z-index</title>
- <meta charset="utf-8">
- <style type="text/css">
- #box{
- width: 1000px;
- height:1000px;
- border: 1px royalblue solid;
- }
- #box1{
- background-color: red;
- width: 200px;
- height: 200px;
- z-index: 999;
- position: absolute;
- }
- #box2{
- background-color: yellow;
- width: 200px;
- height: 200px;
- margin-left: 150px;
- z-index: 99;
- position: absolute;
- }
- #box3{
- background-color: green;
- width: 200px;
- height: 200px;
- margin-left: 300px;
- z-index: 9;
- position: absolute;
- }
- </style>
- </head>
- <body>
- <div id="box">
- <div id="box1">
- <span >我的z-index爲999</span>
- </div>
- <div id="box2">
- <span >我的z-index爲99</span>
- </div>
- <div id="box3">
- <span >我的z-index爲9</span>
- </div>
- </div>
- </body>
- </html>
這時我們就看到了如下圖所示的層疊效果。
綜上所述，我爲大家做出瞭如下的總結，供大家參考。
CSS中z-index屬性
1，定義和用法
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
註釋：元素可擁有負的 z-index 屬性值。
註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）,
注意：Z-index只能工作在被明確定義了absolute，fixed或relative 這三個定位屬性的元素中，如果沒有定義position屬性，則z-index屬性不起作用。
2，說明
該屬性設置一個定位元素沿 z 軸的位置，z 軸定義爲垂直延伸到顯示區的軸。如果爲正數，則離用戶更近，爲負數則表示離用戶更遠。
通俗講就是z-index的值越大，就離我們越近，顯示的就靠前。
原文地址：http://blog.csdn.net/qiushi_1990/article/details/40716833
