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

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

1、序

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

2、拋開position和z-index

  咱們多知道position的默認值爲static,z-index的默認值爲auto。當咱們拋開position和z-index的設置，咱們會發現層疊順序就是html元素的順序,可是不要忘記還有float和display。這裏我經過一個例子：

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

  從上面的結構咱們能夠知道層疊順序由大到小爲inline-block(inline也是同樣)，flaot,block。這裏只用了幾個經常使用的做比較，其餘的大家也能夠嘗試嘗試。

3、設置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);
    }
複製代碼

由上面的結論，咱們知道當元素設置position不爲static時，它的層疊順序比position爲static的元素大（這裏我暫且用大來表示離用戶越近,詞窮-_-）。可是咱們知道position中的absolute的規則：

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

  因此這裏就讓咱們很鬱悶了，是吧？當咱們的dom結構很複雜的時候，你忽然來個positioned(position不爲static)元素，可能就出現了不可控的狀況。而實際上咱們理想的狀況是什麼？拿上面的例子說，既然C是A的子元素，那麼C的層疊順序就不該該大於比A層疊順序大的同級元素（這的確是你想要的。）

  對於這種狀況，咱們只採用position的話，只能把A的同級和上級元素設置爲positioned。

4、該z-index出場了

  首先咱們多知道，z-index真的是一個很單純的屬性，單純到賦值多沒有什麼花樣。可是咱們一般多會用錯他。他正確的使用場景：

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

  那麼咱們再來看上面的需求,咱們能夠經過這樣的設置實現:

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

  這裏有人會這樣想：B的默認z-index爲auto,而你設置了A的z-index的爲-1，固然C不會再覆蓋B咯。可是真的是這樣嗎？

  這時，你能夠設置一下C的z-index,能夠設置一個很大很大的值。可是並不會起做用，因此這裏咱們要引入一個新的概念--層疊上下文（stacking context）

5、層疊上下文(stacking context)

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

  爲何我會說這句話，如今咱們知道z-index的設置依賴於positioned,而你若是不設置positioned,單純的html前後順序，並不會給咱們帶來太大的困擾。

產生層疊上下文的狀況：（下列可能是基於positioned）

• 設置z-index不爲auto;（因此0與auto是有區別的）
• opacity不爲1;
• CSS3新出的屬性對層疊上下文產生了影響，例如transform不爲none。還有其餘的不經常使用的，我就不羅列了。

6、總結

到這裏咱們能夠總結一下考慮層疊順序的因素：

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

到這裏若是你仍是很疑惑的話，我表示很抱歉。這裏送上兩篇參考的文章：

• CSS stacking contexts: What they are and how they work
• What No One Told You About Z-Index

---

  喜歡本文的小夥伴們,歡迎關注個人訂閱號超愛敲代碼,查看更多內容.