在css中，涉及到定位、浮動、z-index的層級問題時很容易讓人雲裡霧裡。本來我以為想讓誰的層級更高就直接給它設定z-index就好了。可是這次做京東專案時，我設定的卻不起作用。
情況類似於這樣：
class="d1">
class="d2">div>
div>
class="d3">div>
d1的高度100px， d2的高度150px。
d2的高度比d1大，超出的部分被d3擋住。我想當然地以為只要設定d2的層級就可以使d1多出的部分擋住d3。可是設定了以後並沒有解決問題，然後我又想到設定父盒子d1的層級，因為層級可以繼承，但是依舊沒有效果。原因到底在哪?其實是因為父盒子d1和d3是並列關係，它們之間並沒有層級的衝突，所以相當於它們都處於同一層。d2是d1的子盒子，無論如何設定z-index層級它都在d1層內，而d3又是後來的，自然會擋住d2超出的部分。
那麼在瀏覽器中關於層級到底是如何規定的呢？這裡就要提到7階層疊水平（stacking order）了。話不多說，上圖。
還拿剛才那個案例來說事。那到底該怎麼樣才能使d2壓住d3呢，只需要給d2或d1設定position。
為什麼定位了就會層級提高呢？我們先看看7階層疊水平圖，block塊狀水平盒子、float浮動盒子、inline/inline-block水平盒子依次都處於負值到0的位置，我理解的是它們都是0層，只不過像成績a-，a，a+一樣還是有高有低的，它們就是0-，0和0+。那麼z-index：auto或z-index：0又是什麼呢。元素設定了position屬性後，這個定位元素的z-index就會自動生效，此時它的z-index值就是預設的auto，也就是0。
回到我們的案例中，d3的屬性是普通的塊狀盒子。看圖說話，d2設定了position以後z-index變為0級，自然是要顯示在d3之上了。
CSS問題 定位 層級
參考資料 css定位position引發的層級關係問題詳解 概念 用於指定乙個元素在文件中的定位方式 常見語法 static relative absolute sticky fixed 大多數情況下，height和width 被設定為auto的絕對定位元素，按其內容大小調整尺寸。但是，被絕對定位的...
unity中的層級問題
注 在ui介面顯示中，場景中需要乙個清屏的攝像機，所以至少應該有兩個攝像機。1.當ui介面中有粒子特效時，給ui新增canvas，不會影響粒子的層級。2.ui中新增貼圖特效時，ui中的canvas的order in layer層級不能太高，太高會使使貼圖的特效看不見，如果硬是要這樣，那只能修改粒子的...
CSS層級關係 z index
做過頁面布局的同學對z index屬性應該是很熟悉了，z index是針對網頁顯示中的乙個特殊屬性。因為顯示器是顯示的圖案是乙個二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z index屬性來表示z軸的區別。表示乙個元素在疊加順序上的上下立體關係。...