<div class=”A” style=”position:relative;”>A (relative)
?<div class=”logo” style=”position:absolute;z-index:99999;“></div>
</div>
<div class=”B” style=”position:relative;”>B (relative)</div>

最近做minisite項目時，碰到了個奇怪的定位問題: 以上的A，B兩個盒子是相對定位,
標牌logo是A的子級，基于A做絕對定位
問題描述：我們希望標牌logo顯示在最上面，但在IE下logo標牌部分被B區域遮住,B在最上層顯示，調整logo的z-index的數值調整無效，firefox下顯示正常。

解決方案：先了解一下所涉及到的幾個定位特性（非官方解釋）：
1. 相對定位元素默認的z-index的數值是0。
2. 當兩個相對定位同時出現時，代碼靠后的z-index優先。
3. 子級遵循父級設定的z-index；如果子級設定了絕對定位、z-index，可以沖破父級顯示
這個問題主要是ie對上面第3條錯誤解釋導致的—在ie下子級的z-index不能沖破父級。網上解決這個bug的辦法一般用hack使B為負值，來降低 B 在IE下級別，這種方法繞了一個大圈：z-index為負值時，產生了新的ie bug。

按照定位的特性，ie的這個bug是可以回避的，從表面上看 B 遮住了logo，實際上是 B 遮住了logo的父級 A ，只要將 A 的z-index設定大于B即可。

<div class=”A” style=”position:relative;z-index:1;“>A (relative)
?<div class=”logo” style=”position:absolute;”></div>
</div>

轉載于:https://www.cnblogs.com/dashafa/p/3910618.html

總結

以上是生活随笔為你收集整理的被遮挡的绝对定位 z-index的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。