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和...