1. 層疊水平
當兩個元素層疊水平相同的時候，這時候就要遵循下面兩個準則：
後來居上原則
誰 z-index 大，誰在上的準則
層疊上下文，你可以理解為 js 中的作用域，乙個頁面中往往不僅僅只有乙個層疊上下文(因為有很多種方式可以生成層疊上下文，只是你沒有意識到而已)，在乙個層疊上下文內，我們按照層疊水平的規則來堆疊元素。
介紹完層疊上下文的概念，我們先來看看哪些方式可以建立層疊上下文？
正常情況下，一共有三種大的型別建立層疊上下文：
預設建立層疊上下文
需要配合 z-index 觸發建立層疊上下文
不需要配合 z-index 觸發建立層疊上下文
一、預設建立層疊上下文
預設建立層疊上下文，只有 html 根元素，這裡你可以理解為 body 標籤。它屬於根層疊上下文元素，不需要任何 css 屬性來觸發。
二、需要配合 z-index 觸發建立層疊上下文
依賴 z-index 值建立層疊上下文的情況：
position 值為 relative/absolute/fixed(部分瀏覽器)
flex 項(父元素 display 為 flex|inline-flex)，注意是子元素會建立層疊上下文，不是父元素建立層疊上下文
這兩種情況下，需要設定具體的 z-index 值，不能設定 z-index 為 auto（要設定成z-index: 0），這也就是 z-index: auto 和 z-index: 0 的一點細微差別。
前面我們提到，設定 position: relative 的時候 z-index 的值為 auto 會生效，但是這時候並沒有建立層疊上下文，當設定 z-index 不為 auto，哪怕設定 z-index: 0 也會觸發元素建立層疊上下文。
三、不需要配合 z-index 觸發建立層疊上下文
這種情況下，基本上都是由 css3 中新增的屬性來觸發的，常見的有：
元素的 isolution 屬性值為 isolate
元素的 -webkit-overflow-scrolling 屬性為 touch
元素的 will-change 屬性具備會建立層疊上下文的值
介紹完如何建立層疊上下文概念以及建立方式後，需要說明的是，建立了層疊上下文的元素可以理解區域性層疊上下文，它只影響其子孫代元素，它自身的層疊水平是由它的父層疊上下文所決定的。
3. 總結一下如何比較兩個 dom 元素的顯示順序呢？
如果是在相同的層疊上下文，按照層疊水平的規則來顯示元素
如果是在不同的層疊上下文中，先找到共同的祖先層疊上下文，然後比較共同層疊上下文下這個兩個元素所在的區域性層疊上下文的層疊水平。
4. css權重參考連線：
CSS 7階層疊水平
著名的7階層疊水平 stacking level 層疊上下文 background border 負z index block塊狀水平盒子 正常流失布局，非inline block，無position定位 static除外 float浮動盒子 無position定位 static除外 的float浮...
CSS中層疊和CSS的7階層疊水平
今天搜尋資料時，忽然發現了以前沒注意的乙個知識點，所以拖過來搞一搞，這個知識點叫做css的7階層疊水平 在說這個知識之前，我們必須要先了解乙個東西以便於我們更好的理解css的7階層疊水平 這個東西就是z index屬性 此篇為上篇，僅僅講z index 基本含義 z index通俗來說就是在z軸上的...
CSS中層疊和CSS的7階層疊水平
今天搜尋資料時，忽然發現了以前沒注意的乙個知識點，所以拖過來搞一搞，這個知識點叫做css的7階層疊水平 在說這個知識之前，我們必須要先了解乙個東西以便於我們更好的理解css的7階層疊水平 這個東西就是z index屬性 此篇為上篇，僅僅講z index 基本含義 z index通俗來說就是在z軸上的...