深入理解CSS定位中的堆叠z-index
前面的話
對于所有定位，最后都不免遇到兩個元素試圖放在同一位置上的情況。顯然，其中一個必須蓋住另一個。但，如何控制哪個元素放在上層，這就引入了屬性z-index
?
定義
利用z-index，可以改變元素相互覆蓋的順序。這個屬性的名字由坐標系統(tǒng)得來，其中從左向右是x軸，從上到下是y軸。從屏幕到用戶是z軸。在這個坐標系中，較高z-index值的元素比較低z-index值的元素離用戶更近，這會導致較高z-index值的元素覆蓋其他元素，這也稱為堆疊或疊放
z-index
值: <integer> | auto | inherit
初始值: auto
應用于: 定位元素
繼承性: 無
[注意]z-index應用于定位元素是CSS2的規(guī)范，到了CSS3標準，z-index的應用范圍擴大了不少
[注意]所有整數(shù)都可以作為z-index的值，包括負數(shù)。如果為元素指定一個負z-index值，會將其移到離讀者更遠的位置，會移到疊放棧的更低層
?
堆疊規(guī)則
對于CSS2.1來說，頁面元素的堆疊規(guī)則如下圖所示:
定位元素的堆疊規(guī)則
[1]對于定位元素(position不是static的元素)來說，不設置z-index或z-index相同時，后面元素覆蓋前面元素
[2]對于處于同一堆疊上下文中的同一層次的元素來說，默認z-index較大值覆蓋z-index較小值
style="width: 100%; height: 361px;" src="https://demo.xiaohuochai.site/css/zindex/z1.html" frameborder="0" width="320" height="240">
堆疊上下文
一旦為一個元素指定了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代表未產(chǎn)生堆疊上下文。則#seven和#eight相當于和它們的父級.box2以及.box1處于同一層次
style="width: 100%; height: 498px;" src="https://demo.xiaohuochai.site/css/zindex/z2.html" frameborder="0" width="320" height="240">
元素不會疊放在其堆疊上下文(即定位父級z-index為數(shù)字值)的背景之下，但可以疊放在其內(nèi)容之下；當元素沒有處于堆疊上下文中，元素不會疊放在<body>元素的背景之下，但可以疊放在其內(nèi)容之下
style="width: 100%; height: 393px;" src="https://demo.xiaohuochai.site/css/zindex/z3.html" frameborder="0" width="320" height="240">
兼容
【1】IE7-瀏覽器z-index的默認值是0
一般地，定位元素的z-index的默認值是auto，而IE7-瀏覽器定位元素的z-index的默認值是0，二者的區(qū)別于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-瀏覽器關(guān)于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瀏覽器結(jié)果，右邊是其他瀏覽器結(jié)果
解決方法
[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瀏覽器結(jié)果，右邊是其他瀏覽器結(jié)果
解決方法
在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>?
CSS3
CSS3的出現(xiàn)對過去的很多規(guī)則發(fā)出了挑戰(zhàn)。對層疊上下文z-index的影響更加顯著，主要包括以下8個屬性
1、z-index值不為auto的flex項(父元素display:flex | inline-flex)
2、元素的透明度opacity值不等于1
3、元素的變形transform不是none
4、元素的mix-blend-mode值不是normal
5、元素的filter值不是none
6、元素的isolation值是isolate
7、will-change指定的屬性值為上面的任意一個
8、元素的-webkit-overflow-scrolling設置為touch
9、元素的mask屬性不是none
設置以上9個屬性的任意一個，都和設置absolute類似，層疊上下文z-index會生效。下面以opacity透明度為例，進行說明
style="width: 100%; height: 468px;" src="https://demo.xiaohuochai.site/css/zindex/z4.html" frameborder="0" width="320" height="240">
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的深入理解CSS定位中的堆叠z-index的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 文本溢出text-overflow和文本
- 下一篇： CSS光标cursor