深入理解CSS定位中的堆叠z-index
前面的話
對于所有定位，最后都不免遇到兩個(gè)元素試圖放在同一位置上的情況。顯然，其中一個(gè)必須蓋住另一個(gè)。但，如何控制哪個(gè)元素放在上層，這就引入了屬性z-index
?
定義
利用z-index，可以改變元素相互覆蓋的順序。這個(gè)屬性的名字由坐標(biāo)系統(tǒng)得來，其中從左向右是x軸，從上到下是y軸。從屏幕到用戶是z軸。在這個(gè)坐標(biāo)系中，較高z-index值的元素比較低z-index值的元素離用戶更近，這會(huì)導(dǎo)致較高z-index值的元素覆蓋其他元素，這也稱為堆疊或疊放
z-index
值: <integer> | auto | inherit
初始值: auto
應(yīng)用于: 定位元素
繼承性: 無
[注意]z-index應(yīng)用于定位元素是CSS2的規(guī)范，到了CSS3標(biāo)準(zhǔn)，z-index的應(yīng)用范圍擴(kuò)大了不少
[注意]所有整數(shù)都可以作為z-index的值，包括負(fù)數(shù)。如果為元素指定一個(gè)負(fù)z-index值，會(huì)將其移到離讀者更遠(yuǎn)的位置，會(huì)移到疊放棧的更低層
?
堆疊規(guī)則
對于CSS2.1來說，頁面元素的堆疊規(guī)則如下圖所示:
定位元素的堆疊規(guī)則
[1]對于定位元素(position不是static的元素)來說，不設(shè)置z-index或z-index相同時(shí)，后面元素覆蓋前面元素
[2]對于處于同一堆疊上下文中的同一層次的元素來說，默認(rèn)z-index較大值覆蓋z-index較小值
style="width: 100%; height: 361px;" src="https://demo.xiaohuochai.site/css/zindex/z1.html" frameborder="0" width="320" height="240">
堆疊上下文
一旦為一個(gè)元素指定了z-index值(不是auto)，該元素會(huì)建立自己的局部堆疊上下文。這意味著，元素的所有后代相對于該祖先元素都有其自己的疊放順序
[注意]auto值指當(dāng)前堆疊上下文中生成的棧層次與其父框的層次相同，這個(gè)框不會(huì)建立新的局部疊放上下文。z-index:auto與z-index:0的值相等，但z-index:0會(huì)建立新的局部堆疊上下文
默認(rèn)樣式
<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相當(dāng)于2和-1，因?yàn)閍uto代表未產(chǎn)生堆疊上下文。則#seven和#eight相當(dāng)于和它們的父級.box2以及.box1處于同一層次
style="width: 100%; height: 498px;" src="https://demo.xiaohuochai.site/css/zindex/z2.html" frameborder="0" width="320" height="240">
元素不會(huì)疊放在其堆疊上下文(即定位父級z-index為數(shù)字值)的背景之下，但可以疊放在其內(nèi)容之下；當(dāng)元素沒有處于堆疊上下文中，元素不會(huì)疊放在<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的默認(rèn)值是0
一般地，定位元素的z-index的默認(rèn)值是auto，而IE7-瀏覽器定位元素的z-index的默認(rèn)值是0，二者的區(qū)別于IE7-瀏覽器的定位元素會(huì)自動(dòng)生成堆疊上下文
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的堆疊順序?yàn)?;div2的堆疊順序?yàn)閍uto;in2的堆疊順序?yàn)閍uto,2相當(dāng)于2。所以覆蓋層次為in2 覆蓋 div1 覆蓋 div2。但在IE7-瀏覽器中，div1的堆疊順序?yàn)?;div2的堆疊順序?yàn)?;in2的堆疊順序?yàn)?,2。所以覆蓋層次為div1 覆蓋 in2 覆蓋 div2
左邊為其他瀏覽器圖示，右邊為IE7-瀏覽器圖示
?
【2】IE6-瀏覽器關(guān)于z-index的一個(gè)怪異bug
當(dāng)元素本身浮動(dòng)且不是定位元素(position不是static)，元素父級是relative，則在IE6-瀏覽器在無論該元素的父級的z-index如何設(shè)置都不起作用
.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]元素去除浮動(dòng)
[2]父級元素的相對定位改成絕對定位
[3]元素添加position屬性(static除外)
以上三個(gè)方法任一方法都可以，其實(shí)就是在破壞bug成立的條件
?
【3】IE6-瀏覽器下select的z-index無效而遮擋div
IE6-瀏覽器下select設(shè)置z-index無效，且默認(rèn)會(huì)堆疊在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">第一項(xiàng)</option><option value="2">第二項(xiàng)</option> </select>左邊是IE6瀏覽器結(jié)果，右邊是其他瀏覽器結(jié)果
解決方法
在IE6-瀏覽器中，雖然div無法覆蓋select，但是iframe可以select。所以可以設(shè)置一個(gè)與div寬高相同的iframe。讓div覆蓋iframe，iframe覆蓋select，最終達(dá)到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">第一項(xiàng)</option><option value="2">第二項(xiàng)</option> </select>?
CSS3
CSS3的出現(xiàn)對過去的很多規(guī)則發(fā)出了挑戰(zhàn)。對層疊上下文z-index的影響更加顯著，主要包括以下8個(gè)屬性
1、z-index值不為auto的flex項(xiàng)(父元素display:flex | inline-flex)
2、元素的透明度opacity值不等于1
3、元素的變形transform不是none
4、元素的mix-blend-mode值不是normal
5、元素的filter值不是none
6、元素的isolation值是isolate
7、will-change指定的屬性值為上面的任意一個(gè)
8、元素的-webkit-overflow-scrolling設(shè)置為touch
9、元素的mask屬性不是none
設(shè)置以上9個(gè)屬性的任意一個(gè)，都和設(shè)置absolute類似，層疊上下文z-index會(huì)生效。下面以opacity透明度為例，進(jìn)行說明
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