vb6 combo根据index显示_彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言
最近，在項目中遇到一個關于CSS中元素z-index屬性的問題，具體問題不太好描述，總結起來就是當給元素和父元素色設置position屬性和z-index相關屬性后，頁面上渲染的元素層級結果和我預想的不一樣。根據自己之前的理解，也沒找到一個合理的解釋。我知道，肯定是我對相關屬性的細節理解存在問題，所以結合官方文檔和在網上各種搜集整理，明白了其中的原因。寫下這篇文章，和大家分享有關CSS中層疊上下文、層疊等級、層疊順序以及z-index相關的一整套技術細節。
如果存在什么錯誤或重要遺漏或者有什么疑問，歡迎留言指正、討論！感謝！
一個“片面”的理解
以往，由于自己使用z-index的頻率不大，所以對這個CSS屬性存在比較片面的認識。一直認為z-index就是用來描述定義一個元素在屏幕Z軸上的堆疊順序。z-index值越大在Z軸上就越靠上，也就是離屏幕觀察者越近。最后才發現這個認識存在很大的問題：
要想完全理解一個東西，首先要明白它是什么，也就是它的定義。我們先看看上面提到的層疊上下文、層疊等級、層疊順序都是什么？定義又太過抽象，后面會再用一個具象的比喻來讓你徹底明白它們到底是什么，有什么聯系。
什么是“層疊上下文”
層疊上下文(stacking context)，是HTML中一個三維的概念。在CSS2.1規范中，每個盒模型的位置是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸。一般情況下，元素在頁面上沿X軸Y軸平鋪，我們察覺不到它們在Z軸上的層疊關系。而一旦元素發生堆疊，這時就能發現某個元素可能覆蓋了另一個元素或者被另一個元素覆蓋。
如果一個元素含有層疊上下文，(也就是說它是層疊上下文元素)，我們可以理解為這個元素在Z軸上就“高人一等”，最終表現就是它離屏幕觀察者更近。
具象的比喻：你可以把層疊上下文元素理解為理解為該元素當了官，而其他非層疊上下文元素則可以理解為普通群眾。凡是“當了官的元素”就比普通元素等級要高，也就是說元素在Z軸上更靠上，更靠近觀察者。
什么是“層疊等級”
那么，層疊等級指的又是什么？層疊等級(stacking level，叫“層疊級別”/“層疊水平”也行)
- 在同一個層疊上下文中，它描述定義的是該層疊上下文中的層疊上下文元素在Z軸上的上下順序。
- 在其他普通元素中，它描述定義的是這些普通元素在Z軸上的上下順序。
說到這，可能很多人疑問了，不論在層疊上下文中還是在普通元素中，層疊等級都表示元素在Z軸上的上下順序，那就直接說它描述定義了所有元素在Z軸上的上下順序就OK啊！為什么要分開描述？
為了說明原因，先舉個栗子：
具象的比喻：我們之前說到，處于層疊上下文中的元素，就像是元素當了官，等級自然比普通元素高。再想象一下，假設一個官員A是個省級領導，他下屬有一個秘書a-1，家里有一個保姆a-2。另一個官員B是一個縣級領導，他下屬有一個秘書b-1，家里有一個保姆b-2。a-1和b-1雖然都是秘書，但是你想一個省級領導的秘書和一個縣級領導的秘書之間有可比性么？甚至保姆a-2都要比秘書b-1的等級高得多。誰大誰小，誰高誰低一目了然，所以根本沒有比較的意義。只有在A下屬的a-1、a-2以及B下屬的b-1、b-2中相互比較大小高低才有意義。
再類比回“層疊上下文”和“層疊等級”，就得出一個結論：
如何產生“層疊上下文”
前面說了那么多，知道了“層疊上下文”和“層疊等級”，其中還有一個最關鍵的問題：到底如何產生層疊上下文呢？如何讓一個元素變成層疊上下文元素呢？
其實，層疊上下文也基本上是有一些特定的CSS屬性創建的，一般有3種方法：
至此，終于可以上代碼了，我們用代碼說話，來驗證上面的結論：
栗子1: 有兩個div，p.a、p.b被包裹在一個div里，p.c被包裹在另一個盒子里，只為.a、.b、.c設置position和z-index屬性
a
b
c
效果：
因為p.a、p.b、p.c三個的父元素div都沒有設置z-index，所以不會產生層疊上下文，所以.a、.b、.c都處于由標簽產生的“根層疊上下文”中，屬于同一個層疊上下文，此時誰的z-index值大，誰在上面。栗子2： 有兩個div，p.a、p.b被包裹在一個div里，p.c被包裹在另一個盒子里，同時為兩個div和.a、.b、.c設置position和z-index屬性
a
b
c
效果：
我們發下，雖然p.c元素的z-index值為9999，遠大于p.a和p.b的z-index值，但是由于p.a、p.b的父元素div.box1產生的層疊上下文的z-index的值為2，p.c的父元素div.box2所產生的層疊上下文的z-index值為1，所以p.c永遠在p.a和p.b下面。同時，如果我們只更改p.a和p.b的z-index值，由于這兩個元素都在父元素div.box1產生的層疊上下文中，所以，誰的z-index值大，誰在上面。
什么是“層疊順序”
說完“層疊上下文”和“層疊等級”，我們再來說說“層疊順序”。“層疊順序”(stacking order)表示元素發生層疊時按照特定的順序規則在Z軸上垂直顯示。由此可見，前面所說的“層疊上下文”和“層疊等級”是一種概念，而這里的“層疊順序”是一種規則。
對于上面第2條，為什么inline/inline-block元素的層疊順序要高于block(塊級)/float(浮動)元素？這個大家可以思考一下！ 其實很簡單，像border/background屬于裝飾元素的屬性，浮動和塊級元素一般用來頁面布局，而網頁設計之初最重要的就是文字內容，所以在發生層疊時會優先顯示文字內容，保證其不被覆蓋。
你要的“套路”
上面說了那么多，可能你還是有點懵。這么多概念規則，來點最實際的，有沒有一個“套路”當遇到元素層疊時，能很清晰地判斷出他們誰在上誰在下呢？答案是——肯定有啊！
1、首先先看要比較的兩個元素是否處于同一個層疊上下文中： 1.1如果是，誰的層疊等級大，誰在上面(怎么判斷層疊等級大小呢？——看“層疊順序”圖)。 1.2如果兩個元素不在統一層疊上下文中，請先比較他們所處的層疊上下文的層疊等級。 2、當兩個元素層疊等級相同、層疊順序相同時，在DOM結構中后面的元素層疊等級在前面元素之上。
光說不練假把式
對于技術學習，代碼展示是最直觀最易懂的方式之一。話不多說，直接上代碼，我們通過以下幾個“栗子”，來進一步驗證掌握上面的結論。
栗子3：
效果：
說明：.box1/.box2雖然設置了position: relative，但是z-index: auto的情況下，這兩個div還是普通元素，并沒有產生層疊上下文。所以，child1/.child2屬于元素的“根層疊上下文”中，此時，誰的z-index值大，誰在上面。栗子4：
對于栗子1中的CSS代碼，我們只把.box1/.box2的z-index屬性值改為數值0，其余不變。
.box1, .box2 { position: relative; z-index: 0;}...復制代碼效果：
說明： 此時，我們發現，僅僅修改了.box1/.box2的z-index屬性值改為數值0，最終結果完全相反。這時.child2覆蓋在了.child1上面。原因是什么呢？很簡單：因為設置z-index: 0后，.box1/.box2產生了各自的層疊上下文，這時候要比較.child1/.child2的層疊關系完全由父元素.box1/.box2的層疊關系決定。但是.box1/.box2的z-index值都為0，都是塊級元素(所以它們的層疊等級，層疊順序是相同的)，這種情況下，在DOM結構中后面的覆蓋前面的，所以.child2就在上面。CSS3中的屬性對層疊上下文的影響
CSS3中出現了很多新屬性，其中一些屬性對層疊上下文也產生了很大的影響。如下：
CSS3中，元素屬性滿足以上條件之一，就會產生層疊上下文。我們用第1條來做一個簡單的解釋說明。
栗子5：
parent child 復制代碼效果：
說明： 我們發現，.child被.parent覆蓋了。按照“套路”來分析一下： 雖然.parent設置了z-index屬性值，但是沒有設置position屬性，z-index無效，所以沒有產生層疊上下文，.parent還是普通的塊級元素。此時，在層疊順序規則中，z-index值小于0的.child會被普通的block塊級元素.parent覆蓋。栗子6：
對于上面的栗子，我們只修改.box的屬性，設置display: flex，其余屬性和DOM結構不變。
.box { display: flex;}效果：
說明： 當給.box設置display: flex時，.parent就變成層疊上下文元素，根據層疊順序規則，層疊上下文元素的background/border的層疊等級小于z-index值小于0的元素的層疊等級，所以z-index值為-1的.child在.parent上面。小測試
下面的代碼，我會把最終頁面渲染的結果放在代碼之后，有興趣的“童鞋”可以分析一下，各個元素的層疊等級，最后來確定這些元素哪個在上哪個在下。
parent child1 child2 child2-1 child2-2效果：
總結
以上是生活随笔為你收集整理的vb6 combo根据index显示_彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 三国战纪饰品搭配表有哪些
- 下一篇： 尼山萨满一共多少关