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