CSS 中的 z-index 屬性實(shí)例詳解
我要評(píng)論一、簡(jiǎn)介
本文主要是對(duì)z-index屬性進(jìn)行詳細(xì)的講解，包括其使用場(chǎng)景、屬性效果、適用范圍等等。本博客的所有代碼執(zhí)行的瀏覽器環(huán)境，都是以Chrome瀏覽器為準(zhǔn)。
1、屬性作用
z-index屬性是用來設(shè)置元素的堆疊順序或者叫做元素層級(jí)，z-index的值越大，元素的層級(jí)越高。當(dāng)元素發(fā)生重疊時(shí)，層級(jí)高的元素會(huì)覆蓋在層級(jí)低的元素的上面，使層級(jí)低的元素的重疊部分被遮蓋住。
當(dāng)父元素設(shè)置了z-index屬性時(shí)，子元素的z-index屬性只與同級(jí)元素和父級(jí)元素作比較時(shí)才有意義，與其他元素對(duì)比時(shí)無意義。此時(shí)子元素與父元素外的所有的外部元素進(jìn)行堆疊層級(jí)順序?qū)Ρ葧r(shí)，都以父元素的z-index屬性值為準(zhǔn)進(jìn)行對(duì)比，子元素本身的z-index屬性值無效。
當(dāng)父元素未設(shè)置了z-index屬性，子元素的z-index屬性與父元素外的所有的外部元素進(jìn)行堆疊層級(jí)順序?qū)Ρ葧r(shí)，都以元素本身的z-index屬性值為準(zhǔn)進(jìn)行對(duì)比。
2、取值范圍
z-index屬性的值分為三種：auto(默認(rèn)值)：與父元素的層級(jí)相等，如各級(jí)祖先元素均未設(shè)置該屬性，則類似于0、number：整數(shù)數(shù)值，在兼容所有瀏覽器的情況下取值范圍是 -2147483584 ~ 2147483584，數(shù)值越大，層級(jí)越高，數(shù)值越小，層級(jí)越低、inherit：繼承父元素的z-index的屬性值
3、適用范圍
z-index屬性只能在設(shè)置了position: relative | absolute | fixed的元素和父元素設(shè)置了 display: flex屬性的子元素中起作用，在其他元素中是不作用的。
二、使用場(chǎng)景
1、同級(jí)元素之間
① 兩個(gè)設(shè)置了定位且z-index屬性值不同的同級(jí)元素
他們之間的層級(jí)，由z-index屬性值決定，屬性值大的，層級(jí)高，顯示在前面。
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 9; /* z-index屬性值小 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
z-index: 99; /* z-index屬性值大 */
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
頁面效果：
① 兩個(gè)設(shè)置了定位且z-index屬性值相同的同級(jí)元素
由于z-index屬性值相同，所以他們之間的層級(jí)，由元素的書寫順序決定，后面的元素會(huì)覆蓋在前面的元素上面。
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 99; /* z-index屬性值相同 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
z-index: 99; /* z-index屬性值相同 */
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
頁面效果：
③兩個(gè)設(shè)置了定位且一個(gè)設(shè)置了z-index屬性一個(gè)沒設(shè)置z-index屬性的同級(jí)元素
未設(shè)置z-index屬性的元素，則取默認(rèn)值0，如果設(shè)置了z-index屬性的元素的z-index屬性值大于0，則該元素的層級(jí)會(huì)高于未設(shè)置z-index屬性的元素：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 1; /* z-index屬性值大于0 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
頁面效果：
但是如果設(shè)置了z-index屬性的元素的z-index屬性值小于0，則該元素的層級(jí)會(huì)低于未設(shè)置z-index屬性的元素：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: -1; /* z-index屬性值小于0 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
頁面效果：
還有最后一種情況，那就是當(dāng)設(shè)置了z-index屬性的元素的z-index屬性值為0的時(shí)候，這時(shí)設(shè)置了z-index屬性的元素與未設(shè)置z-index屬性的元素層級(jí)相同，遵循后面的元素覆蓋前面元素的規(guī)則：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 0; /* z-index屬性值等于0 */
background-color: blanchedalmond;
}
.box2 {
position: relative;
top: -100px;
left: 100px;
background-color: blueviolet;
}
</style>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
頁面效果：
2、父子元素之間
① 父元素未設(shè)置z-index屬性，子元素設(shè)置了z-index屬性
當(dāng)子元素的z-index屬性值大于等于 0 時(shí)，子元素的層級(jí)會(huì)高于父元素的層級(jí)，而當(dāng)子元素的z-index屬性值小于 0 時(shí)，子元素的層級(jí)會(huì)低于父元素的層級(jí)：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: 0; /* z-index的值大于等于0 */
}
.box1-son2 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
z-index: -1; /* z-index的值小于0，層級(jí)低，被父元素?fù)踝?*/
background-color: red;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
<div class="box1-son2">
盒子1的子盒子2
</div>
</div>
頁面效果：
② 父元素設(shè)置了z-index屬性，子元素未設(shè)置z-index屬性
在這種情況下，無論父元素的z-index屬性值為多少，子元素的層級(jí)永遠(yuǎn)高于父元素，子元素永遠(yuǎn)會(huì)擋住父元素的內(nèi)容：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
z-index: 9999; /* z-index的值很大 */
}
.box1-son1 { /* 未設(shè)置z-index */
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
頁面效果：
③ 父元素設(shè)置了z-index屬性，子元素也設(shè)置了z-index屬性
在這種情況下，無論子元素和父元素的z-index屬性值為多少，子元素的層級(jí)永遠(yuǎn)高于父元素，子元素永遠(yuǎn)會(huì)擋住父元素的內(nèi)容：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
z-index: 9999; /* z-index的值很大 */
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: -9999; /* z-index的值很小 */
}
.box1-son2 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
z-index: 0; /* z-index的值等于0 */
background-color: red;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
<div class="box1-son2">
盒子1的子盒子2
</div>
</div>
頁面效果：
3、子元素與其父元素外的其他元素之間
① 父元素未設(shè)置z-index屬性，子元素z-index屬性值與父元素的同級(jí)元素z-index屬性值進(jìn)行對(duì)比
因?yàn)槭歉冈氐耐?jí)元素進(jìn)行對(duì)比，且父元素未設(shè)置z-index，所以是以子元素的z-index屬性值為準(zhǔn)與父元素的同級(jí)元素進(jìn)行對(duì)比，遵循z-index屬性值大的元素，層級(jí)高規(guī)則，以及層級(jí)相同時(shí)，后面元素覆蓋前面元素的規(guī)則。
當(dāng)子元素z-index屬性值小于父元素的同級(jí)元素z-index屬性值：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
/* z-index未設(shè)置 */
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: 99; /* z-index的值大 */
}
.box2 {
position: relative;
margin: -100px 0 0 100px;
z-index: 9;/* z-index的值小 */
background-color: blueviolet;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
</div>
頁面效果：
當(dāng)子元素z-index屬性值小于等于其父元素的同級(jí)元素z-index屬性值：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
/* z-index未設(shè)置 */
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: 1; /* z-index的值小 */
}
.box2 {
position: relative;
margin: -100px 0 0 100px;
z-index: 9;/* z-index的值大 */
background-color: blueviolet;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
</div>
頁面效果：
② 父元素設(shè)置了z-index屬性，子元素z-index屬性值與父元素的同級(jí)元素z-index屬性值進(jìn)行對(duì)比
因?yàn)槭歉冈氐耐?jí)元素進(jìn)行對(duì)比，且父元素設(shè)置了z-index，所以是以父元素的z-index屬性值為準(zhǔn)與父元素的同級(jí)元素進(jìn)行對(duì)比，同樣遵循z-index屬性值大的元素，層級(jí)高規(guī)則，以及層級(jí)相同時(shí)，后面元素覆蓋前面元素的規(guī)則。
當(dāng)父元素的z-index屬性值小于等于父元素的同級(jí)元素的z-index屬性值，但子元素的z-index屬性值大于父元素的同級(jí)元素的z-index屬性值：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
z-index: 0; /* z-index設(shè)置 */
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: 999; /* z-index的值大 */
}
.box2 {
position: relative;
margin: -100px 0 0 100px;
z-index: 9;/* z-index的值小 但是大于 box1 的z-index */
background-color: blueviolet;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
</div>
頁面效果：
當(dāng)父元素的z-index屬性值大于父元素的同級(jí)元素的z-index屬性值，但子元素的z-index屬性值小于父元素的同級(jí)元素的z-index屬性值：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
z-index: 99; /* z-index設(shè)置 */
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: -9; /* z-index的值小 */
}
.box2 {
position: relative;
margin: -100px 0 0 100px;
z-index: 9;/* z-index的值小 但是大于 box1 的z-index */
background-color: blueviolet;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
</div>
頁面效果：
③ 父元素均未設(shè)置z-index屬性，子元素Az-index屬性值與父元素的同級(jí)元素的子元素Bz-index屬性值進(jìn)行對(duì)比
這種情況比較特殊，元素之前的堆疊順序，需要分開一一進(jìn)行比較。首先將每個(gè)子元素與其父元素進(jìn)行比較，再將第一次比較中兩個(gè)層級(jí)低的進(jìn)行比較，然后將上次比較中兩個(gè)層級(jí)高的進(jìn)行比較，最后再將第二次比較中層級(jí)高的與第三次比較中層級(jí)低的進(jìn)行比較，最終就可以得出結(jié)果。
當(dāng)子元素A的z-index屬性值大于子元素Bz-index屬性值時(shí)：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
background-color: blanchedalmond;
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: 99; /* z-index的值大 */
}
.box2 {
position: relative;
margin: -120px 0 0 80px;
background-color: blueviolet;
}
.box2-son1 {
position: relative;
width: 100px;
height: 100px;
z-index: 9; /* z-index的值小 */
background-color: green;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
<div class="box2-son2">
盒子2的子盒子2
</div>
</div>
</div>
頁面效果：
④ 父元素A和B均設(shè)置了z-index屬性，子元素A1z-index屬性值與父元素的同級(jí)元素的子元素B1z-index屬性值進(jìn)行對(duì)比
當(dāng)父元素設(shè)置了z-index屬性時(shí)，子元素的z-index屬性只與同級(jí)元素和父級(jí)元素作比較時(shí)才有意義，與其他元素對(duì)比時(shí)無意義。此時(shí)子元素與父元素外的所有的外部元素進(jìn)行堆疊層級(jí)順序?qū)Ρ葧r(shí)，都以父元素的z-index屬性值為準(zhǔn)進(jìn)行對(duì)比，子元素本身的z-index屬性值無效。
當(dāng)父元素A的z-index屬性值大于父元素B的z-index屬性值，但子元素A1z-index屬性值小于子元素B1z-index屬性值時(shí)：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 99;
background-color: blanchedalmond;
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: -99; /* z-index的值小 */
}
.box2 {
position: relative;
margin: -120px 0 0 80px;
z-index: 9;
background-color: blueviolet;
}
.box2-son1 {
position: relative;
width: 100px;
height: 100px;
z-index: 98; /* z-index的值大 */
background-color: green;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
<div class="box2-son2">
盒子2的子盒子2
</div>
</div>
</div>
頁面效果：
④ 父元素A設(shè)置了z-index屬性，父元素B未設(shè)置，子元素A1z-index屬性值與子元素B1z-index屬性值進(jìn)行對(duì)比
這又是一個(gè)比較復(fù)雜的情況，首先將未設(shè)置z-index屬性的父元素B與其子元素B1進(jìn)行對(duì)比，然后將第一次對(duì)比中層級(jí)高的與父元素A進(jìn)行對(duì)比，再將第一次對(duì)比中層級(jí)低的與第二次對(duì)比中層級(jí)低的進(jìn)行對(duì)比，最后將兩個(gè)子元素的層級(jí)進(jìn)行對(duì)比，這樣就可得出最終的層級(jí)順序：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box1 {
position: relative;
z-index: 9;
background-color: blanchedalmond;
}
.box1-son1 {
position: relative;
width: 100px;
height: 100px;
margin: auto;
background-color: #ccc;
z-index: -99; /* z-index的值小 */
}
.box2 {
position: relative;
margin: -120px 0 0 80px;
background-color: blueviolet;
}
.box2-son1 {
position: relative;
width: 100px;
height: 100px;
z-index: 98; /* z-index的值大 */
background-color: green;
}
</style>
<div class="box1">
盒子1
<div class="box1-son1">
盒子1的子盒子1
</div>
</div>
<div class="box2">
盒子2
<div class="box2-son2">
盒子2的子盒子2
</div>
</div>
</div>
頁面效果：
⑤ 其他情況
4、父元素設(shè)置了display: flex，子元素之間對(duì)比
其規(guī)則相當(dāng)于同級(jí)子元素之間的對(duì)比，z-index屬性值大的元素，層級(jí)高：
代碼：
<style>
div {
width: 200px;
height: 200px;
}
.box2 {
display: flex;
margin: 0px 0 0 80px;
background-color: blueviolet;
}
.box2-son1 {
width: 100px;
height: 100px;
z-index: 9;
background-color: green;
}
.box2-son2 {
width: 100px;
height: 100px;
margin-left: -20px;
z-index: 8;
background-color: yellow;
}
</style>
<div class="box2">
盒子2
<div class="box2-son1">
盒子2的子盒子1
</div>
<div class="box2-son2">
盒子2的子盒子2
</div>
</div>
頁面效果：
4、父元素A設(shè)置了display: flex，父元素B設(shè)置了position和z-index，兩者各級(jí)元素之間的對(duì)比，與上面的兩個(gè)設(shè)置了position的父元素之間進(jìn)行對(duì)比的規(guī)則，是相同的。
略。。。
到此這篇關(guān)于CSS 中的 z-index 屬性實(shí)例詳解的文章就介紹到這了,更多相關(guān)css z-index 屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
深入理解css中position屬性及z-index屬性(推薦)
這篇文章主要介紹了深入理解css中position屬性及z-index屬性(推薦)，想要學(xué)習(xí)了解CSS樣式的同學(xué)，可以了解一下。希望對(duì)大家的學(xué)習(xí)有所幫助。2016-11-29- 這篇文章主要介紹了CSS中的z-index屬性基本使用教程,z-index主要用來控制層疊級(jí)別,注意IE瀏覽器下的效果可能會(huì)有點(diǎn)特殊...需要的朋友可以參考下2016-03-05
深入解析CSS中z-index屬性對(duì)層疊順序的處理
這篇文章主要介紹了CSS中z-index屬性對(duì)層疊順序的處理,分情況講解了各種曾跌情況下哪個(gè)box更靠近用戶,需要的朋友可以參考下2016-03-05- 在這篇文章里，我們會(huì)準(zhǔn)確的說明究竟什么是Z-index，它為什么會(huì)這么不為人所了解，并一起討論一些關(guān)于它的實(shí)際使用中的問題2014-11-04
- 在這篇文章里，我們會(huì)準(zhǔn)確的說明究竟什么是Z-index，它為什么會(huì)這么不為人所了解，并一起討論一些關(guān)于它的實(shí)際使用中的問題。我們同時(shí)會(huì)描述一些會(huì)遇到的瀏覽器間的差異，2014-10-22