【CSS學習】--- z-index屬性

1、前言

 

　　網頁顯示其實是三維的，咱們直觀看到的有x軸和y軸，但在網頁佈局上還有一個z軸。

　　對於定位元素，咱們使用top、right、left、bottom來實現元素在x-y平面上的定位，但爲了表示佈局的三維立體概念，還引入了z-index，z-index屬性用來設置元素的堆疊順序，擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的上方。

　　z-index有三個參數：

1. auto：默認值，至關於未設置z-index，可看做z-index: 0
2. number：無單位數字，用來設置z-index大小
3. inherit：繼承父元素的z-index屬性值

 

舉個小栗子熱熱身

    <div style="width: 100px; height: 100px; background-color: red; position: relative;"></div>
    <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

第二個div向上移動50px，與第一個div產生了重疊部分，顯示狀況以下：

第二個div顯示在了第一個div上方，也就是重疊部分第二個div遮住了第一個div，如今給第一個div添加z-index屬性：

    <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 1;"></div>
    <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

 

 咱們將第一個div的z-index屬性設置爲1

這時咱們發現第一個div遮住了第二個div，下面咱們將逐步介紹定位元素屬性z-index。

 

2、z-index只對定位元素奏效

 

　　定位元素（position 屬性值爲 relative 或 absolute 或 fixed）能夠理解爲具備x、y、z座標的元素。若是定位元素沒有顯示給出z-index屬性，那麼它的z-index默認值爲0。

　　若是一個元素不是定位元素，那給它設置z-index屬性也是無效的。

栗子來了

    <div style="width: 100px; height: 100px; background-color: red; z-index: 5;"></div>
    <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: 1;"></div>

 

 第一個div的z-index設置爲5，第二個div的z-index設置爲1

咱們看到第二個div覆蓋了第一個div，雖然第一個div的z-index屬性值更大，但它不是定位屬性，因此它的z-index不起做用。

 

3、非定位元素與非定位元素，以及相同z-index的堆疊順序比較

 

　　若是兩個元素都爲非定位元素，或者兩個定位元素的z-index值相等，那麼按照文檔流的順序，後寫的元素將覆蓋先寫的元素。

兩個栗子接住

1. 兩個都未設置z-index的定位元素

    <div style="width: 100px; height: 100px; background-color: red; position: relative;"></div>
    <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>

 

後寫的這個div（背景爲black）覆蓋了先寫的div（背景爲red）

 

2. 兩個非定位元素

    <div style="width: 100px; height: 100px; background-color: red;"></div>
    <div style="width: 100px; height: 100px; background-color: black; margin-top: -50px;"></div>

 

 後寫的這個div（背景爲black）覆蓋了先寫的div（背景爲red）

 

 

 4、定位元素與非定位元素的堆疊順序

 

　　若是定位元素未設置z-index或者z-index爲正數，那麼此類該定位元素的堆疊順序大於非定位元素；若是定位元素z-index爲負數,那麼此類定位元素堆疊順序小於非定位元素。

慄如

第一個定位元素div的z-index爲正數，第二個爲非定位元素div，第一個定位元素div的z-index爲負數

    <div style="width: 100px; height: 100px; background-color: green; position: relative; top: 50px; z-index: 1"></div>    
    <div style="width: 100px; height: 100px; background-color: red;"></div>
    <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: -1;"></div>

 

 z-index爲正數的定位元素覆蓋了非定位元素，非定位元素覆蓋了 z-index爲負數的定位元素

 

 

 5、父子及兄弟的堆疊順序

　　

　　1. 若是父元素設置了z-index且不是默認值auto，不管子元素的z-index爲什麼值，子元素堆疊順序永遠大於其父元素；

 

    <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px; z-index: 100">
        <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -10;"></div>        
    </div>

 

 雖然子div的z-index值小於其父div，但子div仍顯示在了父div的上方

 

　　2. 若是父元素未設置z-index或值爲auto，那麼當子元素z-index爲負數時，父元素堆疊順序將大於子元素，不然子元素堆疊順序大於父元素

 

    <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;">
        <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -1;"></div>
    </div>

 

父元素未設置z-index，子元素z-index爲-1，能夠看到子元素被父元素覆蓋了

 

 

 　　3. 不管父元素的z-index如何，兄弟元素間的z-index值均可相互比較，z-index值越大堆疊順序越高

 

    <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;">
        <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div>
        <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 1; top: -50px;"></div>        
    </div>

 

第一個子元素的z-index大於第二個子元素的z-index，因此第一個子元素覆蓋第二個子元素

 

　　3. 對於父元素及兄弟元素以外的其它元素，子元素的堆疊順序由其父元素的z-index決定。

 

    <div style="position: relative; z-index: 10;">
        <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div>
    </div>
    <div style="position: relative; z-index: 5;">
        <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 3; top: -50px;"></div>        
    </div>

 

 儘管背景爲紅色的子div元素z-index小於背景爲黑色的子div元素，但紅色仍覆蓋了黑色，就是由於紅色div的父元素z-index大於黑色div的父元素

因此不管黑色子div的z-index多大，它的堆疊順序始終小於紅色div

 

6、最後

 感謝博主謙行的博客：z-index應用簡單總結。

若有錯誤或不足之處還望指出探討，十分感謝！