我看很多人都弄不清楚css的層級關係 自己也百度過很多網上的z-index的說法，比如 什麼是“層疊上下文” 層疊上下文(stacking context)，是HTML中一個三維的概念。在CSS2.1規範中，每個盒模型的位置是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸。一般情況下，元素在 ...
我看很多人都弄不清楚css的層級關係
自己也百度過很多網上的z-index的說法，比如
什麼是“層疊上下文”
層疊上下文(stacking context)，是HTML中一個三維的概念。在CSS2.1規範中，每個盒模型的位置是三維的，分別是平面畫布上的X軸，Y軸以及表示層疊的Z軸。一般情況下，元素在頁面上沿X軸Y軸平鋪，我們察覺不到它們在Z軸上的層疊關係。而一旦元素髮生堆疊，這時就能發現某個元素可能覆蓋了另一個元素或者被另一個元素覆蓋。
比如這種解釋 這種解釋非常的官方，也很書面化 我第一次理解的時候也是很麻煩，我說下我理解的看法吧
z-index屬性值並不是在任何元素上都有效果。它僅在定位元素
這句話看起來就很明白 zi-index的屬性 只能在定位元素有效果
我理解的網頁 所有的層級關係 初始值全是1 誰都覆蓋不到誰的元素上 只能擠來擠去
z-index的理解 我把它理解成一個個的磚頭吧 然後我們不要以正常的想法去看待index
我們可以把自己想象成一個無人機 在空中的方式去看待index
比如一個div就是一個磚頭 我們在電腦前方去看 相當於我們就是無人機
但是磚頭都是平鋪的 不能層疊的鋪
而z-index呢 相當於他在磚頭上又覆蓋了一個磚頭
比如托塔天王的玲瓏寶塔 有七層對應下方七個層級
z-index 1 2 3 4 5 6 7
如果站在空中的角度就是 只能先看到最高的一層 也就是第七層 z-index7 想象一下自己在側面看 就很清楚能分析出值越大的說明他在的層級越高
在空中看到的層級關係就是 誰越高你第一眼就能看到那個元素 當然元素有大小區分 覆蓋在上面的元素越小的 下麵的大的話 也是可以看到的 但是中間區域會被最高層級的元素占位空間擋住。
加油 一起努力
