1. 程式人生 > >IE絕對定位元素始終被遮擋或者消失的解決方法

IE絕對定位元素始終被遮擋或者消失的解決方法

最近做一個下拉選單,當滑鼠懸停在主選單上,顯示下拉選單。ie8和FF都很正常,但是 ie6下拉選單內容始終被下邊的內容遮擋。

試了很多種解決辦法。發現原來是IE的bug。 解決方法如下:

1.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,以及沒有清除浮動時,IE6/7,FF中顯示一致; 

2.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,有清除浮動時,IE6/7不顯示絕對定位層,FF顯示; 

3.當絕對定位層的鄰近浮動層的寬度等於父層寬度時,以及沒有清除浮動時,IE6不顯示絕對定位層,IE7/FF顯示; 

4.當絕對定位層的鄰近浮動層的寬度等於父層寬度時,有清除浮動時,IE6/7不顯示絕對定位層,FF顯示; 

要解決這個BUG的方法也很簡單,讓絕對定位層不挨著浮動層放置就好了,還有個更簡單的方法,在絕對定位元素和其他元素之間加一個空白的div。 

再來看看絕對定位元素神祕消失被遮擋的現象 

先了解一下所涉及到的幾個定位特性: 

1. 相對定位元素預設的z-index的數值是0。 

2. 當兩個相對定位同時出現時,程式碼靠後的z-index優先。 

3. 子級遵循父級設定的z-index;如果子級設定了絕對定位、z-index,可以衝破父級顯示 

看下面的程式碼: 

複製程式碼程式碼如下:

<div style="position:relative; background:#FF0000; width:200px; height:100px;"> 

<div style="position:absolute; background:#FFFF00; width:49px; height:50px; left:106px; top:310px; z-index:100"></div> 

</div> 

<div style="position:relative; background:#000000; width:200px; height:100px;"></div> 

<div style="position:relative; background:#9900FF; width:200px; height:100px;"></div> 

程式碼解釋:上面是三個相鄰的相對定位的層,在第一個層里加了個相對其絕對定位的層,按照理論,這個絕對定位的元素是在三個相對定位元素之上的,但是,實際卻沒有顯示。嘗試設定z-index值也沒有效。 

網上解決這個bug的辦法一般用hack使B為負值,來降低 B 在IE下級別 

但是這種方法在z-index為負值時,產生了新的ie bug 

按照定位的特性,ie的這個bug是可以迴避的 

從表面上看 下面的層 遮住了上面的絕對定位層,實際上是下面的 層遮住了絕對定位的的父級層,只要將 該父級層 的z-index設定大於後面的層即可

相關推薦

IE絕對定位元素始終遮擋或者消失解決方法

最近做一個下拉選單,當滑鼠懸停在主選單上,顯示下拉選單。ie8和FF都很正常,但是 ie6下拉選單內容始終被下邊的內容遮擋。 試了很多種解決辦法。發現原來是IE的bug。 解決方法如下: 1.當絕對定位層的鄰近浮動層的寬度不等於父層寬度時,以及沒有清除浮動時,IE6/7,FF

小tip: margin:auto實現絕對定位元素的水平垂直居中

實現 可用 偏移 css代碼 百度 add 包含塊 統計 ica 轉載自:http://www.zhangxinxu.com/wordpress/?p=3794 一、絕對定位元素的居中實現 如果要問如何CSS實現絕對定位元素的居中效果,很多人心裏已經有答案了。 兼容性不

總結一下各種居中(內聯元素、塊級元素、浮動元素絕對定位元素)*(水平、垂直)

一個 常見 一是 -a flex 樣式 有一個 margin round   在平時寫網頁樣式的時候,元素居中應該是最常見不過的了,在這裏我們把常見居中的情況簡單總結一下。本文討論以下幾種情況:內聯元素、塊級元素、浮動元素、絕對定位元素。居中的情況分兩種情況:水平居中和垂直

table中絕對定位元素相對td定位失效解決方案

targe 項目 定位元素 .html 完美 cnblogs posit chrom 並且 在一個table中,我需要在td裏面絕對定位一個div, 寫法:td{position:relative;} div{position:absolute;} OK,就這麽簡單,

關於又見絕對定位元素受限於父容器寬度的問題

再一次的發現了這個問題,無論是絕對定位元素還是浮動元素,他們有一個特性:受限於父容器的寬度? 這是父容器li標籤屬性: 再來就是子容器了,在li標籤裡面套上了一層ul標籤,要做出效果,那麼使用了絕對定位? 預設寬度為3個子li標籤的寬度之和:屬性:  那麼開始操作了,

css3 讓絕對定位元素水平居中的方法

一、絕對定位元素的居中實現 如果要問如何CSS實現絕對定位元素的居中效果,很多人心裡已經有答案了。 相容性不錯的主流用法是: 1 2 3 4 5 6 .element { width: 600px; height: 400px; po

絕對定位元素設定水平居中

需求:有時頁面內的一些容器需要定位在特定的某個位置,但是需要容器在水平方向上面居中顯示,比如頁面內的一個背景圖裡面放置一個容器,使用margin-top不方便,就決定使用絕對定位來設定。 實現方法: 方法一、知道容器尺寸的前提下 .element { width: 600px;

塊狀元素居中/浮動元素居中/絕對定位元素居中/內容居中

1、塊狀元素水平居中: margin-left=auto;margin-right=auto; 2、浮動塊狀元素水平居中: 外包裝塊“float:left;position:relative;left:50%”; 內部塊“float:left;position:relati

絕對定位元素的水平垂直居中

二、絕對定位元素的居中實現 如果要問如何CSS實現絕對定位元素的居中效果,很多人心裡已經有答案了。 相容性不錯的主流用法是: .element { width: 600px; height: 400px; position: absolute; left

IE5、6下絕對定位元素和浮動元素並列,絕對定位元素消失不見解決方案

浮動元素和絕對定位元素是同級的話,絕對定位元素就會消失,所以咱們只要讓他們兩個不處於同級就可以避免這個BUG <!DOCTYPE html> <html lang="en">

解決CSS垂直居中的幾種方法(基於絕對定位,基於視口單位,Flexbox方法

       在CSS中對元素進行水平居中是非常簡單的:如果它是一個行內元素,就對它的父元素應用 text-align: center ;如果它是一個塊級元素,就對它自身應用 margin: aut

ie7,ie8下 使用絕對定位的a標籤點選失效解決辦法

今天無意間發現一個使用絕對定位的a標籤在ie7,ie8下點選失效解決辦法,查了一下原來竟是醬紫的,又get到了一個新的技能。 以下是問題解決的辦法: 這種時候有兩種解決方法(主要是針對a標籤不能設定背景情況): 1、給a標籤新增樣式:background:url(ab

ubuntu下/boot空間占滿的解決方法

image strong 釋放 方法 網上 目錄 init election dpkg 我這個方法是直接刪除或移除的方法,網上有采用 查看dpkg --get-selections|grep linux 安裝的內核包 然後卸載不需要的內核 sudo apt-get remo

下拉列表flash覆蓋的解決方法

blog har 一個 install ogl flash asp mode .aspx 做鼎聞有一段時間了,有的banner輪播圖的地方用flash替換的時候,就會導致上面的導航條下拉列表被flash覆蓋,找了一段時間沒有得到有效的解決方法,後來知道關鍵是flash的這一

win7查看某個端口占用的解決方法

標示 AS 查看 方法 繼續 所有 解決方法 findstr exe 1.開始---->運行---->cmd,或者是window+R組合鍵,調出命令窗口。 2.輸入命令:netstat -ano,列出所有端口的情況。在列表中我們觀察被占用的端口,比如是49157

爬蟲IP禁的簡單解決方法

clas rate HR useragent agents 時間 tst 代理服務器 github 爬蟲以前聽上去好厲害好神秘的樣子,用好了可以成就像Google、百度這樣的索索引擎,用不好可以憑借不恰當的高並發分分鐘崩掉一個小型網站。寫到這裏想到12306每年扛住的並發請

網站掛馬的解決方法與分析如何會掛馬

運用 都沒有 使用 註意 In ext 一段 ××× 其他 如今絕大多數站長都在想著怎麽建設外鏈,怎麽發布網站內容,把自己網站的弄到首頁或是前三位,網站被掛馬的安全其實也需要站長們註意,因為一旦網站安全出了問題,網站的排名也會受到很大的影響。下面就仔細分析幾種關於網站安全的

爬蟲IP禁的簡單解決方法——切換UserAgent

-a ref 技術分享 blank bsp target log AS In 【轉載】Python爬蟲之UserAgent 用到的庫 https://github.com/hellysmile/fake-useragent 爬蟲IP被禁的簡單解決方法——切換User

MVC的view頁面內嵌C#語法發現路徑轉碼的解決方法

ima str htm com view col .com img ole 一,上視圖代碼,如下 console.log(‘@urlquery.ToString()‘); console.log(‘@Html.Raw(urlquery.ToString())‘); 二,

php ajax提交post請求出現陣列截斷情況的解決方法

一、場景 今天做儲存專題商品列表的時候發現,前端明明有2300多條資料,但是實際服務端接受存入資料庫才166條 二、解決過程 經過除錯發現前端頁面提交post請求時資料量是正確的,但到服務端只能接受到166條。 一開始以為是post請求長度超過限制,不過看了下請求內容才200多K