今天話題是由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
複製**
從上面的結構我們可以知道層疊順序由大到小為inline-block(inline也是一樣)，flaot,block。這裡只用了幾個常用的作比較，其他的你們也可以嘗試嘗試。
三、設定position
當position進來搞事情的時候，這就稍微有點複雜了。首先你要記住的:
但是這裡又有很多細節問題，例如：當我們的dom結構多次巢狀時：
div.item1 a
div.child1 c
div.item2 b
複製**
.item1
}.item2
複製**
由上面的結論，我們知道當元素設定position不為static時，它的層疊順序比position為static的元素大（這裡我暫且用大來表示離使用者越近,詞窮-_-）。但是我們知道position中的absolute的規則：
所以這裡就讓我們很鬱悶了，是吧？當我們的dom結構很複雜的時候，你突然來個positioned(position不為static)元素，可能就出現了不可控的情況。而實際上我們理想的情況是什麼？拿上面的例子說，既然c是a的子元素，那麼c的層疊順序就不應該大於比a層疊順序大的同級元素（這的確是你想要的。）
對於這種情況，我們只採用position的話，只能把a的同級和上級元素設定為positioned。
四、該z-index出場了
首先我們多知道，z-index真的是乙個很單純的屬性，單純到賦值多沒有什麼花樣。但是我們通常多會用錯他。他正確的使用場景：
那麼我們再來看上面的需求,我們可以通過這樣的設定實現:
.item1
複製**
這裡有人會這樣想：b的預設z-index為auto,而你設定了a的z-index的為-1，當然c不會再覆蓋b咯。但是真的是這樣嗎？
這時，你可以設定一下c的z-index,可以設定乙個很大很大的值。但是並不會起作用，所以這裡我們要引入乙個新的概念--層疊上下文（stacking context）
五、層疊上下文(stacking context)
對於層疊上下文的概念，我相信看了上面的例子，你應該知道上面意思，可能表達還有點詞窮。大白話就是：子元素要看設定層疊上下文的父元素的臉色行事了。其實說到層疊上下文，這裡我們要意識到一點，如果你的元素不是positioned，可能談層疊上下文就有點不靠譜了。
為什麼我會說這句話，現在我們知道z-index的設定依賴於positioned,而你如果不設定positioned,單純的html先後順序，並不會給我們帶來太大的困擾。
產生層疊上下文的情況：（下列多是基於positioned）
六、總結
到這裡我們可以總結一下考慮層疊順序的因素：
最簡單的php trim函式並不簡單
字串的處理在任何程式中應該是最最常見的了吧。php 的trim函式就是用來去除字串的字串。最常用的就是去除空格了。但是，這個簡單的函式，是否真的像你認為的那樣簡單呢？trim函式的定義如下 trim string str string character mask t n r 0 x0b strin...
設計模式 並不簡單的工廠模式
一般情況下，工廠模式分為三種更加細分的型別 簡單工廠 工廠方法和抽象工廠。實際上，這三種我們最常用得是第一種簡單工廠和工廠方法模式。而抽象工廠的原理稍微複雜點，在實際的專案中相對也不常用。所以，我們今天主要講解的重點是前兩種工廠模式。建立抽象產品類，定義具體產品得公共介面 abstract clas...
CSS並不簡單 個性化輸入框的實踐
這次通過這個個性化的輸入框，給大家介紹一些容易忽略的知識點。新手注意 本文的html採用的是jade，css採用的sass，js採用的vue 一 效果 大家先看一下效果動態圖，思考一波，帶著你的思考來看接下來的內容，可能效果更好一點。pc端demo位址 二 需求 當我們開始做一樣東西的時候一定要先分...