堆疊順序的誤區和z-index

Z-index

        在咱們經常使用的css中z-index 屬性是設置節點的堆疊順序, 這是咱們對 z-index 屬性廣泛的認識. 與此同時, 咱們老是對堆疊順序的概念模糊不清，這樣將會致使咱們在平時的佈局中出現一些問題。下面我我的對css中z-index的一些我的的認識，但願能幫到你們，有說錯的地方但願你們指正。  

        css佈局中咱們經常會使用一些float:laft;和float:right;以及定位中的absolute,relative,fixed;

有的人誤認爲定位和定位之間是自己就存在附帶堆疊順序的,在本身通過測試以後發現,他們的默認是沒有堆疊順序的,只是在html中標籤的先後順序致使的而使你們誤認爲是定位和定位之間的堆疊順序而致使的。

        

---

        下面是正常使用z-index代碼示例：

        定位中的static是標準流，因此這裏不作講解

        當咱們有三個盒子

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

        咱們給他們分別設置fixed，relative，absolute；背景色爲紅色，藍色，綠色

        咱們會發現absolute的綠色盒子會在最上面，在html代碼中更改標籤的位置順序則可讓盒子出如今堆疊層的最上面，固然若是咱們要想在不改變html標籤的順序，那麼咱們就可使用第二種方法z-index：

        在咱們添加z-index是要注意這個樣式是有值的；值也能夠影響咱們的堆疊順序。

        樣式內z-index的值越大的堆疊層越高，固然咱們也要注意z-index也並非在何時都管用的。

        只有在同同樣式時，好比定位與定位之間的堆疊，浮動與浮動之間的堆疊，若是有兩個盒子，一個盒子爲浮動元素一個盒子爲定位元素，兩個盒子發生堆疊，此時咱們想要浮動的盒子顯示在定位盒子之上，咱們是沒有辦法的，設置z-index這個時候是沒有用的。

        定位的盒子自己堆疊的順序就要比浮動的盒子的堆疊順序要高，因此此時咱們要解決這個問題就須要把浮動盒子換成定位的盒子，設置以後咱們就能夠z-index來設置堆疊順序了。

        上面是本人的一點我的觀點，但願能夠幫到你們，後續本身也會寫一些關於web中一些我的認識。有不一樣觀點你們能夠隨意發表。