深入理解CSS定位中的堆疊z-index - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　對于所有定位，最后都不免遇到兩個元素試圖放在同一位置上的情況。顯然，其中一個必須蓋住另一個。但，如何控制哪個元素放在上層，這就引入了屬性z-index

定義

　　利用z-index，可以改變元素相互覆蓋的順序。這個屬性的名字由坐標系統得來，其中從左向右是x軸，從上到下是y軸。從屏幕到用戶是z軸。在這個坐標系中，較高z-index值的元素比較低z-index值的元素離用戶更近，這會導致較高z-index值的元素覆蓋其他元素，這也稱為堆疊或疊放

z-index

　　值: <integer> | auto | inherit

　　初始值: auto

　　應用于: 定位元素

　　繼承性: 無

　　[注意]z-index應用于定位元素是CSS2的規范，到了CSS3標準，z-index的應用范圍擴大了不少

　　[注意]所有整數都可以作為z-index的值，包括負數。如果為元素指定一個負z-index值，會將其移到離讀者更遠的位置，會移到疊放棧的更低層

堆疊規則

　　對于CSS2.1來說，頁面元素的堆疊規則如下圖所示:

定位元素的堆疊規則

　　[1]對于定位元素(position不是static的元素)來說，不設置z-index或z-index相同時，后面元素覆蓋前面元素

　　[2]對于處于同一堆疊上下文中的同一層次的元素來說，默認z-index較大值覆蓋z-index較小值

堆疊上下文

　　一旦為一個元素指定了z-index值(不是auto)，該元素會建立自己的局部堆疊上下文。這意味著，元素的所有后代相對于該祖先元素都有其自己的疊放順序

　　[注意]auto值指當前堆疊上下文中生成的棧層次與其父框的層次相同，這個框不會建立新的局部疊放上下文。z-index:auto與z-index:0的值相等，但z-index:0會建立新的局部堆疊上下文

默認樣式

<div class="box1">
    <ul class="list1">
        <li id="one">1</li>
        <li id="two">2</li>
        <li id="three">3</li>
        <li id="four">4</li>
    </ul>
    <ul class="list2">
        <li id="five">5</li>
        <li id="six">6</li>
    </ul>    
</div>
<div class="box2">
    <div id="seven">7</div>
    <div id="eight">8</div>
</div>

.box1{z-index: 1;}
.box2{z-index: auto;}
.list1{z-index: 2;}
.list2{z-index: 1;}
#one{z-index: -1;}
#two{z-index: 1;}
#three{z-index: 0;}
#four{z-index: auto;}
#five{z-index: 2;}
#six{z-index: 1;}
#seven{z-index: 2;}
#eight{z-index: -1;}

//堆疊順序
.box1                  1
.box1 .list1           1,2
.box1 .list1 #one      1,2,-1
.box1 .list1 #two      1,2,1
.box1 .list1 #three    1,2,0
.box1 .list1 #four     1,2,auto
.box1 .list2           1,1
.box1 .list2 #five     1,1,2
.box1 .list2 #six      1,1,1
.box2                  auto
.box2 #seven           auto,2
.box2 #eight           auto,-1

　　[注意]auto,2和auto,-1相當于2和-1，因為auto代表未產生堆疊上下文。則#seven和#eight相當于和它們的父級.box2以及.box1處于同一層次

　　元素不會疊放在其堆疊上下文(即定位父級z-index為數字值)的背景之下，但可以疊放在其內容之下；當元素沒有處于堆疊上下文中，元素不會疊放在<body>元素的背景之下，但可以疊放在其內容之下

兼容

【1】IE7-瀏覽器z-index的默認值是0

　　一般地，定位元素的z-index的默認值是auto，而IE7-瀏覽器定位元素的z-index的默認值是0，二者的區別于IE7-瀏覽器的定位元素會自動生成堆疊上下文

div{
    position: absolute;
    border: 1px solid black;
}    
.div1{
    width: 300px;
    height: 100px;
    background-color: pink;
    z-index: 1;
}
.div2{
    background-color: lightgreen;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}
.in2{
    width: 100px;
    height: 150px;
    background-color: lightblue;
    z-index: 2;
    border: none;
}

<div class="div1"></div>
<div class="div2">
    <div class="in2"></div>
</div>

　　一般地，div1的堆疊順序為1;div2的堆疊順序為auto;in2的堆疊順序為auto,2相當于2。所以覆蓋層次為in2 覆蓋 div1 覆蓋 div2。但在IE7-瀏覽器中，div1的堆疊順序為1;div2的堆疊順序為0;in2的堆疊順序為0,2。所以覆蓋層次為div1 覆蓋 in2 覆蓋 div2

　　左邊為其他瀏覽器圖示，右邊為IE7-瀏覽器圖示

【2】IE6-瀏覽器關于z-index的一個怪異bug

　　當元素本身浮動且不是定位元素(position不是static)，元素父級是relative，則在IE6-瀏覽器在無論該元素的父級的z-index如何設置都不起作用

.div1{
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    background-color: pink;
}
.box{
    position: relative;
    z-index:2;
}
.div2{
    float: left;
    width: 150px;
    height: 50px;
    background-color: lightgreen;
}

<div class="div1"></div>
<div class="box">
    <div class="div2"></div>    
</div>

　　左邊是IE6瀏覽器結果，右邊是其他瀏覽器結果

解決方法

　　[1]元素去除浮動

　　[2]父級元素的相對定位改成絕對定位

　　[3]元素添加position屬性(static除外)

　　以上三個方法任一方法都可以，其實就是在破壞bug成立的條件

【3】IE6-瀏覽器下select的z-index無效而遮擋div

　　IE6-瀏覽器下select設置z-index無效，且默認會堆疊在div上

.box{
    left: 30px;
    z-index:2;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: pink;
}
select{
    width: 100px;
    position: absolute;
    z-index:1;
}

<div class="box"></div>
<select name="select" id="slt1">
    <option value="1">第一項</option>
    <option value="2">第二項</option>
</select>

　　左邊是IE6瀏覽器結果，右邊是其他瀏覽器結果

解決方法

　　在IE6-瀏覽器中，雖然div無法覆蓋select，但是iframe可以select。所以可以設置一個與div寬高相同的iframe。讓div覆蓋iframe，iframe覆蓋select，最終達到select被div覆蓋的效果

iframe{
    left: 30px;
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 2;
}

<iframe src="#" frameborder="0"></iframe>
<div class="box"></div>
<select name="select" id="slt1">
    <option value="1">第一項</option>
    <option value="2">第二項</option>
</select>