div層調(diào)整z-index屬性無效原因分析及解決方法
我要評(píng)論z-index 無效
在做的過程中，發(fā)現(xiàn)了一個(gè)很簡單卻又很多人應(yīng)該碰到的問題，設(shè)置Z-INDEX屬性無效。在CSS中，只能通過代碼改變層級(jí)，這個(gè)屬性就是z-index，要讓z-index起作用有個(gè)小小前提，就是元素的position屬性要是relative，absolute或是fixed。
1.第一種情況（z-index無論設(shè)置多高都不起作用情況）：
這種情況發(fā)生的條件有三個(gè)：
1、父標(biāo)簽 position屬性為relative；
2、問題標(biāo)簽無position屬性（不包括static）；
3、問題標(biāo)簽含有浮動(dòng)(float)屬性。
eg:z-index層級(jí)不起作用，浮動(dòng)會(huì)讓z-index失效，代碼如下:
<DIV style="POSITION: relative; Z-INDEX: 9999">
<IMG style="FLOAT: left" src="/131101/1A5494I0-0.jpg">
</DIV>
解決辦法有三個(gè)（任一即可）：
1、position:relative改為position:absolute；
2、浮動(dòng)元素添加position屬性（如relative，absolute等）；
3、去除浮動(dòng)。
2.第二種情況
IE6下，層級(jí)的表現(xiàn)有時(shí)候不是看子標(biāo)簽的z-index多高，而要看整個(gè)DOM tree（節(jié)點(diǎn)樹）的第一個(gè)relative屬性的父標(biāo)簽的層級(jí)。
eg:IE7與IE6有著同樣的bug，原因很簡單，雖然圖片所在div當(dāng)前的老爸層級(jí)很高(1000)，但是由于老爸的老爸不頂用，可憐了9999如此強(qiáng)勢的孩子沒有出頭之日?。?，代碼如下:
<DIV style="POSITION: relative">
<DIV style="POSITION: relative; Z-INDEX: 1000">
<DIV style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </DIV>
</DIV>
</DIV>
解決辦法： 在第一個(gè)relative屬性加上一個(gè)更高的層級(jí)（z-index:1），代碼如下:
<DIV style="POSITION: relative; Z-INDEX: 1">
<DIV style="POSITION: relative; Z-INDEX: 1000">
<DIV style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </DIV>
</DIV>
</DIV>
相關(guān)文章
- 這篇文章主要介紹了css3的transform造成z-index無效解決方案,需要的朋友可以參考下2014-12-04
div層調(diào)整z-index屬性在IE中無效原因分析及解決方法
在寫css代碼時(shí)發(fā)現(xiàn)了一個(gè)很簡單卻又很多人應(yīng)該碰到的問題，設(shè)置Z-INDEX屬性無效，要讓z-index起作用有個(gè)小小前提，就是元素的position屬性要是relative，absolute或是fixed2013-02-20- 在Web開發(fā)中我們經(jīng)常通過z-index設(shè)置多個(gè)元素之間的層疊關(guān)系，這種方式在多數(shù)情況下很有效，但是如果遇到有窗體元素時(shí)這種方式常常顯得無能為力，今天我們就一塊看一下如何2011-08-02
IE6 select z-index無效，遮擋div bug的解決方法
在最近的一個(gè)項(xiàng)目中，遇到了IE6 select遮擋div的bug，為了解決這個(gè)bug我查了很多資料，試圖找到一個(gè)最最有效的方法，很多人是通過iframe的方法來解決，其實(shí)我查了國外的很2010-06-18