日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

div層調(diào)整z-index屬性在IE中無(wú)效原因分析及解決方法

云知道

很久沒有寫前端代碼了，最近有個(gè)項(xiàng)目需要親自動(dòng)手，但是在做的過程中，發(fā)現(xiàn)了一個(gè)很簡(jiǎn)單卻又很多人應(yīng)該碰到的問題，設(shè)置Z-INDEX屬性無(wú)效 。
在CSS中，只能通過代碼改變層級(jí)，這個(gè)屬性就是z-index，要讓z-index起作用有個(gè)小小前提，就是元素的position屬性要是relative，absolute或是fixed 。

1.第一種情況（z-index無(wú)論設(shè)置多高都不起作用情況）：
這種情況發(fā)生的條件有三個(gè)：
1、父標(biāo)簽 position屬性為relative；
2、問題標(biāo)簽無(wú)position屬性（不包括static）；
3、問題標(biāo)簽含有浮動(dòng)(float)屬性 。

eg:z-index層級(jí)不起作用，浮動(dòng)會(huì)讓z-index失效

復(fù)制代碼代碼如下:
div style="position:relative; z-index:9999;"
img style="float:left;" src="/images/defaultpic.gif" /
/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，原因很簡(jiǎn)單，雖然圖片所在div當(dāng)前的老爸層級(jí)很高(1000)，但是由于老爸的老爸不頂用，可憐了9999如此強(qiáng)勢(shì)的孩子沒有出頭之日?。?

復(fù)制代碼代碼如下:
div style="position:relative;"
div style="position:relative; z-index:1000;"
div style="position:absolute; z-index:9999;"
img src="/images/defaultpic.gif" /
/div
/div
/div

解決辦法： 在第一個(gè)relative屬性加上一個(gè)更高的層級(jí)（z-index:1）

復(fù)制代碼代碼如下:
div style="position:relative; z-index:1;"
div style="position:relative; z-index:1000;"
div style="position:absolute; z-index:9999;"
img src="/images/defaultpic.gif" /
/div
/div
/div

    推薦閱讀