層疊上下文(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 想象一下自己在側面看 就很清楚能分析出值越大的說明他在的層級越高
在空中看到的層級關係就是 誰越高你第一眼就能看到那個元素 當然元素有大小區分 覆蓋在上面的元素越小的 下面的大的話 也是可以看到的 但是中間區域會被最高層級的元素佔位空間擋住。
CSS z index層級在IE中無效
解決辦法有三個 任一即可 1 position relative改為position absolute 2 浮動元素新增position屬性 如relative，absolute等 3 去除浮動。2.第二種情況 ie6下，層級的表現有時候不是看子標籤的z index多高，而要看整個dom tree ...
關於position的層級
在層級比較多的頁面中，經常會出現被遮蓋的情況。下面用例項來講講這個問題的解決方法。其實宗旨就一條 第乙個父元素的層級一定要比第二個父元素的層級要高。先看一下不如意的 父級元素1 子級元素1 父級元素2 子級元素2 不如意的顯示效果 父級元素1 子級元素1 父級元素2 子級元素2 正確顯示結果 總結 ...
關於z index這個層級的問題
z index它可真是乙個神奇的東西，它可以隨意安排你的層的疊加問題。如你想讓紅色矩形壓在藍色矩形上，正常布局先建立乙個紅色的再建議乙個藍色的，就可以了。但如果我相反來建立，那麼就得借助z index方法了。用z index需要先加position absolute relative定位，不然是不起...