ie6 z index不起作用的解決方法

2022-03-28 05:25:18 字數 2041 閱讀 8946

z-index伴隨著層的概念產生的。網頁中,層的概念與photoshop或是flash中層的概念是一致的。熟悉photoshop或是flash的應該知道,層級越高(圖層越靠上),越在上面顯示,如果層發生重疊,層級高的會覆蓋層級低的,如果非透明或半透明,則會遮擋。

層的高低就是靠手動調的,滑鼠拖拽,或是ctrl+]或是ctrl+shift+[快捷鍵改變層的次序。如下圖,滑鼠拖移改變層次序的過程中:

類似,可以手動改變圖層次序,或是使用as指令碼,例如:容器物件.setchildindex(顯示物件,0)就是讓物件底層顯示,而容器物件.setchildindex(顯示物件,容器物件.numchildren-1)就是最上面顯示。

z-index屬性決定了乙個html元素的層疊級別。元素層疊級別是相對於元素在z軸上(與x軸y軸相對照)的位置而言。乙個更高的z- index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現。顯然,只能通過**改變層級,這個屬性就是z-index,要 讓z-index起作用有個小小前提,就是元素的position屬性要是relative,absolute或是fixed。下為z-index的示意 圖:

按照正常的思維,z-index層級越高,內容越應該在上面顯示。在大部分的瀏覽器在大部分的情況下,確實如此,但是不絕對。尤其遇到ie6,這傢伙,估計是後媽帶大的,從小營養不良,結果後來健康問題一堆又一堆。z-index的問題就是其中之一,而本文就是要講講這個ie6下z-index不起作用的問題。

1、頁面上固定不動的乙個黑色背景,透明度40%,幾乎滿屏顯示的層級為1的絕對定位層。

html為:

對應css為:#blank

作用是為了讓層級關係一目了然。看:

這說明內容在z-index為1的絕對定位層之下。

這說明內容在z-index為1的絕對定位層之上。

2、頁面上做對比的是美女,在半透明黑色絕對定位層的上面還是下面很容易辨別,這樣,您就能夠對我所說的z-index不起作用有很直觀的認識了。

首先講講第一種z-index無論設定多高都不起作用情況。

這種情況發生的條件有三個:

1、父標籤 position屬性為relative;

2、問題標籤無position屬性(不包括static);

3、問題標籤含有浮動(float)屬性。

您可以拿下面的**自己做個簡單測試:

z-index都9999了,層級夠高吧,但是,看下面的圖:

現在去掉浮動,html**如下:

結果ie6下:

將外部div的position:relative屬性改為 absolute可以解決這一問題

解決方法有三,1、position:relative改為position:absolute;2、去除浮動;3、浮動元素新增position屬性(如relative,absolute等)。

用術語具體描述為:

父標籤position屬性為relative或absolute時,子標籤的absolute屬性是相對于父標籤而言的。而在ie6下,層級的表現有時候不是看子標籤的z-index多高,而要看它們的父標籤的z-index誰高誰低。

但是,相信這裡面很多人不知道ie6下,決定層級高低的不是當前的父標籤,而是整個dom tree(節點樹)的第乙個relative屬性的父標籤。有時平時我們多處理乙個父標籤,z-index層級多而複雜的情況不多見,所以難免會有認識上的小小偏差。

例如下面的html**:

可以看到,mm3的父標籤div 是絕對定位,層級9999,比1大多了,絕對定位的父標籤層級1000(10000也一樣),也比黑色半透明層的z-index:1大多了,但是,我們可憐的ie6童鞋——

ie7與ie6有著同樣的bug,原因很簡單,雖然所在div當前的老爸層級很高(1000),但是由於老爸的老爸不頂用,可憐了9999如此強勢的孩子沒有出頭之日啊!

知道原因解決就很輕鬆了,給第一任老爸新增z-index後的html**如下:

結果ie6童鞋喜笑顏開,春光燦爛:

z-index這玩意深不可測,裡面所蘊含的知識不是 css手冊上的那點東西,那只是冰山一角。這涉及到border及background的堆疊模型,涉及到同層級的顯示問題,以及瀏覽器顯示的些機制等, 這是很深的一潭水。

ie6 z index不起作用的完美解決方法

一 概念 z index伴隨著層的概念產生的。網頁中,層的概念與photoshop或是flash中層的概念是一致的。熟悉photoshop或是flash的應該知道,層級越高 圖層越靠上 越在上面顯示,如果層發生重疊,層級高的會覆蓋層級低的,如果非透明或半透明,則會遮擋。在photoshop中 層的高...

z index的運用(z index不起作用)

需要完成的效果 處於hover狀態 實際完成效果碰到的問題 處於hover狀態,忽略字型圖示的不一樣,找不到一樣的 可以看到這裡再給下面的盒子新增box shadow後,陰影部分在hover狀態的情況下,還是能顯示出來。這時候想到了z index來解決問題 z index 屬性設定元素的堆疊順序。擁...

z index不起作用的大坑

話說好久就沒有更新部落格了,今天為了裝一把,差點沒把自己裝進去。以後還是低調一點好,哈哈,話不多說,直奔主題。今天遇到的就是z index不起作用的問題。乙個後台小哥不知道抽什麼瘋,寫元素覆蓋偏不讓用absolute,搞的我之後廢了9牛二虎之力寫了一下,問題描述是這樣的,一對兄弟節點,insert和...