CSS並不簡單--z-index引發的思考

descire發表於2017-05-25

今天話題是由z-index的偶然失效,引發的一系列問題。

一、序

  從定義上看z-index真的是個很簡單的屬性,就是描述元素的層疊順序,但是有時間我們會發現z-index並不會起作用。這時候我們就需要好好的理解一下z-index背後的問題。

二、拋開position和z-index

  我們多知道position的預設值為static,z-index的預設值為auto。當我們拋開position和z-index的設定,我們會發現層疊順序就是html元素的順序,但是不要忘記還有float和display。這裡我通過一個例子:

    div.item1   inline-block
    div.item2   float
    div.item3   block
複製程式碼

image

  從上面的結構我們可以知道層疊順序由大到小為inline-block(inline也是一樣),flaot,block。這裡只用了幾個常用的作比較,其他的你們也可以嘗試嘗試。

三、設定position

當position進來搞事情的時候,這就稍微有點複雜了。首先你要記住的:

  • 當元素設定position為absolute,relative或者fixed,它們的層疊順序大於position為static的。

  但是這裡又有很多細節問題,例如:當我們的dom結構多次巢狀時:

    div.item1   A
        div.child1  C
    div.item2   B
複製程式碼
    .item1 {
        background: red;
        .child1 {
            position: absolute;
            top: 100px;
            left: 150px;
            background: blue;
        }
    }

    .item2 {
        background: rgb(200,10,200);
    }
複製程式碼

image

由上面的結論,我們知道當元素設定position不為static時,它的層疊順序比position為static的元素大(這裡我暫且用大來表示離使用者越近,詞窮-_-)。但是我們知道position中的absolute的規則:

  • absolute 定位是相對於 static 定位以外的第一個父元素進行定位【這裡原先我也理解錯了,謝謝路過的大神^_^】

  所以這裡就讓我們很鬱悶了,是吧?當我們的dom結構很複雜的時候,你突然來個positioned(position不為static)元素,可能就出現了不可控的情況。而實際上我們理想的情況是什麼?拿上面的例子說,既然C是A的子元素,那麼C的層疊順序就不應該大於比A層疊順序大的同級元素(這的確是你想要的。)

  對於這種情況,我們只採用position的話,只能把A的同級和上級元素設定為positioned。

四、該z-index出場了

  首先我們多知道,z-index真的是一個很單純的屬性,單純到賦值多沒有什麼花樣。但是我們通常多會用錯他。他正確的使用場景:

  • 使用z-index的元素必須是positioned。

  那麼我們再來看上面的需求,我們可以通過這樣的設定實現:

    .item1 {
        position: relative;
        z-index: -1;
    }
複製程式碼

image

  這裡有人會這樣想:B的預設z-index為auto,而你設定了A的z-index的為-1,當然C不會再覆蓋B咯。但是真的是這樣嗎?

  這時,你可以設定一下C的z-index,可以設定一個很大很大的值。但是並不會起作用,所以這裡我們要引入一個新的概念--層疊上下文(stacking context)

五、層疊上下文(stacking context)

  對於層疊上下文的概念,我相信看了上面的例子,你應該知道上面意思,可能表達還有點詞窮。大白話就是:子元素要看設定層疊上下文的父元素的臉色行事了。其實說到層疊上下文,這裡我們要意識到一點,如果你的元素不是positioned,可能談層疊上下文就有點不靠譜了。

  為什麼我會說這句話,現在我們知道z-index的設定依賴於positioned,而你如果不設定positioned,單純的html先後順序,並不會給我們帶來太大的困擾。

產生層疊上下文的情況:(下列多是基於positioned)

  • 設定z-index不為auto;(所以0與auto是有區別的)
  • opacity不為1;
  • CSS3新出的屬性對層疊上下文產生了影響,例如transform不為none。還有其他的不常用的,我就不羅列了。

六、總結

到這裡我們可以總結一下考慮層疊順序的因素:

  • html元素的排列順序
  • display與float
  • position
  • z-index的使用
  • 層疊上下文的產生

到這裡如果你還是很疑惑的話,我表示很抱歉。這裡送上兩篇參考的文章:


  喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.

CSS並不簡單--z-index引發的思考

相關文章