欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ie下的css層疊z-index各種問題詳細(xì)整理

  發(fā)布時(shí)間：2013-01-09 10:25:13   作者：佚名   我要評(píng)論
可是真有些日子沒有寫DIV+CSS了，而且對(duì)IE6兼容性的坑碰到的還是不夠多(以前做國外項(xiàng)目)，所以這次開發(fā)中不可避免的碰見了幾個(gè)問題，尤其是在IE下的 z-index 問題很有意思，所以整理了一些資料和總結(jié)分享給大家,希望可以幫助你們

到新地方有些日子了，差不多適應(yīng)了這邊的工作節(jié)奏與流程。接到的第一個(gè)開發(fā)任務(wù)是幾個(gè)比較簡(jiǎn)單的頁面，需要做的工作就是先把設(shè)計(jì)圖變成頁面，然后使用PHP創(chuàng)建幾個(gè)請(qǐng)求的接口傳遞數(shù)據(jù)，標(biāo)準(zhǔn)且簡(jiǎn)潔的web開發(fā)思路?？墒钦嬗行┤兆記]有寫DIV+CSS了，而且對(duì)IE6兼容性的坑碰到的還是不夠多(以前做國外項(xiàng)目)，所以這次開發(fā)中不可避免的碰見了幾個(gè)問題，尤其是在IE下的 z-index 問題很有意思，所以整理了一些資料和總結(jié)分享給大家...注：因?yàn)橐肓薺sfiddle，所以頁面加載受影響會(huì)稍慢一些^_^

閱讀目錄：

    z-index屬性
    z-index規(guī)范參考
    在IE下出現(xiàn)的問題
    在IE6下z-index的問題
      >拼爹的時(shí)代
      >萬惡的float 
    IE6下 select z-index無效而遮擋div
      >用 iframe 包裹 select 元素
      >以 Iframe 作為div的子元素，覆蓋 select 元素
    本文結(jié)語 

z-index屬性

    z-index : auto | numberz-index 屬性設(shè)置元素的堆疊順序，如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)；擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面；z-index 僅能在定位元素上奏效（position 屬性值為 relative 或 absolute 或 fixed的對(duì)象）。

z-index規(guī)范參考

在 W3C CSS2.1 規(guī)范中，每個(gè)元素都具有三維的空間位置，除我們所熟悉的水平和垂直位置外，元素還可在 "Z軸" 方向上層層相疊、依次向前排開； 元素在 "Z 軸" 方向上的呈現(xiàn)順序，由層疊上下文和層疊級(jí)別決定。在文檔中，每個(gè)元素僅屬于一個(gè)層疊上下文。在給定的層疊上下文中，每個(gè)元素都有一個(gè)整型的層疊級(jí)別，它描述了在相同層疊上下文中元素在 "Z軸" 上的顯示順序；同一個(gè)層疊上下文中，層疊級(jí)別大的顯示在上，層疊級(jí)別小的顯示在下，相同層疊級(jí)別時(shí)，遵循后來居上的原則（back-to-font）；不同層疊上下文中，元素顯示順序以父級(jí)層疊上下文的層疊級(jí)別來決定顯示的先后順序。與自身的層疊級(jí)別無關(guān)；每一個(gè)定位元素都?xì)w屬于一個(gè)stacking context。根元素形成 root stacking context，而其他的 stacking context 則由定位元素產(chǎn)生（此定位元素的 z-index 被定義一個(gè)非 auto 的 z-index 值），定位子元素會(huì)以這個(gè) local stacking context 為參考，用相同的規(guī)則來決定層疊順序；當(dāng)任何一個(gè)元素層疊另一個(gè)包含在不同 stacking context 元素時(shí)，則會(huì)以 stacking context 的層疊級(jí)別（stack level）來決定顯示的先后情況。也就是說，在相同的 stacking context 下才會(huì)用元素本身的 z-index 來決定先后，不同時(shí)則由 stacking context 的父元素的 z-index 來決定。

在IE下出現(xiàn)的問題

當(dāng)定位元素的 'z-index' 未設(shè)置時(shí)（默認(rèn)為 auto），在 IE6 IE7 IE8(Q) 下將會(huì)創(chuàng)建一個(gè)新的局部層疊上下文。而在其它瀏覽器下，則嚴(yán)格按照規(guī)范，不產(chǎn)生新的局部層疊上下文。

這個(gè)問題將導(dǎo)致定位元素的層疊關(guān)系在不同瀏覽器出現(xiàn)很大的區(qū)別，嚴(yán)重的可導(dǎo)致頁面布局混亂、內(nèi)容覆蓋等。

受影響的瀏覽器有IE6 IE7 IE8(Quriks Mode)

直接從w3help復(fù)制了代碼，分析以下代碼：

復(fù)制代碼
代碼如下:

<style type="text/css">
body { margin:0; }
.p1{ top:20px; height:50px; width:150px; background-color:blue;}
.p2{ top:10px; left:20px; height:30px; width:100px; background-color:yellow;}
.p3{ top:0px; left:50px; height:100px; width:50px; background-color:red;}
</style>
<div style="position:relative;" class="p1">1
<div style="position:absolute; z-index:1;" class="p2">2</div>
</div>
<div style="position:absolute;" class="p3">3</div>

注：Q代表Quriks Mode，即混雜模式。

根據(jù) W3C CSS2.1 規(guī)范中的說明，定位元素【p1】和【p3】由于未設(shè)置 'z-index' 特性（使用默認(rèn)值 auto），它們不會(huì)創(chuàng)建新的局部層疊上下文，而定位元素【p2】設(shè)置了 z-index:1 則會(huì)創(chuàng)建新的層疊上下文。

另，在同一根層疊上下文中，同為 z-index:auto 的定位元素【p1】和【p3】，它們的層疊級(jí)別相同，但【p3】在【p1】之后，所以在 Z 軸上【p3】比【p1】靠前顯示，又，【p2】層疊上下文的層疊級(jí)別為正數(shù)，所以【p2】的層疊級(jí)別要比【p3】高。因此，它們?cè)?Z 軸上的順序?yàn)椋海ㄗ裱?back-to-font）【p1】 -> 【p3】 -> 【p2】

以上為標(biāo)準(zhǔn)瀏覽器下的情況。

而在 IE6 IE7 E8(Q) 下，定位元素【p1】和【p3】都創(chuàng)建了新的局部層疊上下文，在同一根層疊上下文中，它們的層疊級(jí)別相同，但【p3】在【p1】之后，所以在 Z 軸上【p3】比【p1】靠前顯示。此時(shí)，由于【p2】處于【p1】的層疊上下文中，所以【p2】在 Z 軸上要比【p3】靠后。

在來一個(gè)例子：

復(fù)制代碼
代碼如下:

<style>
.parent{width:200px; height:200px; padding:10px;}
.sub{text-align:right; font:15px Verdana;width:100px; height:100px;}
.lt50{left:50px;top:50px;}
</style>
<div style="position:absolute; background:lightgrey;" class="parent">
<div style="position:absolute;z-index:20;background:darkgray;" class="sub">20</div>
<div style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</div>
</div>
<div style="position:absolute;left:80px;top:80px;background:black;" class="parent">
<div style="position:absolute;z-index:2;background:darkgray;" class="sub">2</div>
<div style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</div>
</div>

解決辦法

理解層疊上下文、層疊級(jí)別與 'z-index' 之間的關(guān)系。在可能出現(xiàn)定位元素相互覆蓋的情況時(shí)，明確指定定位元素的 'z-index' 特性，避免此問題的出現(xiàn)。

注：此段內(nèi)容基本都是來自w3help。

在IE6下z-index的問題

我不是一個(gè)喜歡抱怨的人，so...有關(guān)抱怨IE6的話在此省略500字...

先上個(gè)圖說說我在工作中實(shí)際遇到的問題：

圖片的上半部分就是在非IE6下的交互，圖片下半部分是在IE6下的顯示效果，當(dāng)打開虛擬機(jī)測(cè)試的時(shí)候我表示瞬間碉堡了，囧...在IE6下這個(gè)tips被蓋住了，很明顯這個(gè)不是我想要的效果，可是為什么會(huì)出現(xiàn)這個(gè)情況類？接著往下看。

分析此類問題的原因：

1.這是個(gè)拼爹的時(shí)代，在IE6下很好的體現(xiàn)了這點(diǎn)...囧

按照正常的思維，z-index層級(jí)越高，內(nèi)容越應(yīng)該在上面顯示，在大部分的瀏覽器在大部分的情況下，確實(shí)如此，但是不絕對(duì)。尤其遇到IE6。

在IE6下的層級(jí)高低不僅要看本身，還要看自己的父元素是否給力：父元素的 position 屬性為 relative或absolute 時(shí)，子元素的 absolute 屬性是相對(duì)于父元素而言的。而在IE6下的層級(jí)的表現(xiàn)有時(shí)候不是看子元素的 z-index 多高，而要看它們的父元素的 z-index 誰高誰低。點(diǎn)擊 Result 可以看到HTML對(duì)應(yīng)的VIEW。

從以上的代碼中可以看到最內(nèi)層<div>的z-index屬性為999，其父元素的z-index屬性為100。按照正常的顯示邏輯，圖片應(yīng)該正常顯示且不會(huì)被背景色所影響，可是在IE6下會(huì)有問題，直接上圖片會(huì)比較直觀，比較看看IE6下和非IE6瀏覽器的顯示效果。chrome、FF和opera都經(jīng)過測(cè)試了，為了不使圖片過多我就拿個(gè)chrome的截圖吧。

重現(xiàn)這個(gè)bug的條件很簡(jiǎn)單，只要絕對(duì)定位（position:absolute）<div>的祖先元素，或者說是最頂級(jí)的祖先元素的 relative 屬性小于黑色半透明層的z-index層級(jí)即可。解決辦法也很簡(jiǎn)單，只需要給的祖先元素加上z-index就可以。

為具有 relative 屬性的頂級(jí)祖先元素打了雞血(加了z-index)后，IE6下終于正常顯示了。這個(gè)問題很現(xiàn)實(shí)的教育了我們 - 在拼爹拼不過的條件下我們只能靠自己努力...

IE6下拼爹的問題也就是我在實(shí)際開發(fā)中碰到的問題，現(xiàn)在已經(jīng)完美解決且達(dá)到需求的效果了。接下來要介紹的是一些我總結(jié)的資料，都是介紹在IE環(huán)境下得各種z-index的坑。

 2.萬惡的float

float 是 css 的定位屬性，而且應(yīng)該是CSS中最常用的屬性之一了，至于為什么說它萬惡等我改天去準(zhǔn)備一篇文章單獨(dú)進(jìn)行解說，在這里借著以前的學(xué)習(xí)筆記簡(jiǎn)單說幾點(diǎn)：

1. IE7 中，底邊距 bug是當(dāng)浮動(dòng)父元素有浮動(dòng)子元素時(shí)，這些子元素的底邊距會(huì)被父元素忽略掉；

2. 3像素間距是指挨著浮動(dòng)元素的文本會(huì)神奇的被踢出去3像素，好像浮動(dòng)元素的周圍有一個(gè)奇怪的力場(chǎng)一樣；

3. 雙倍邊距bug處理 IE6 時(shí)，另一個(gè)需要記住的事情是，如果在和浮動(dòng)方向相同的方向上設(shè)置外邊距(margin)，會(huì)引發(fā)雙倍邊距。

有關(guān)float的掃盲就先到這里，還有一點(diǎn)就是float畢竟是標(biāo)準(zhǔn)的屬性，而且大多數(shù)的前端都習(xí)慣用它去實(shí)現(xiàn)頁面，所以我的建議就是：深入理解 HTML語義和表現(xiàn)。

接著開始講述 z-index和float 在IE6環(huán)境下擦出的坑爹的火花...先上一段代碼：

復(fù)制代碼
代碼如下:

<div style="background:#000;width:100%;height:600px;opacity:0.3; filter:alpha(opacity=30);position:absolute;left:0;top:0;z-index:1;overflow:hidden;"></div>
<div style="position:relative;z-index:100;">
<img src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_1.jpg" style="float:left;" width="300" />
</div>

看到<img>有設(shè)置float屬性，上面這段代碼顯示的效果與IE6下拼爹失敗一樣，IE6下的犀牛書是灰色的 T.T 。為了讓犀牛書正常顯示，只需要把<img>的float屬性去掉即可。

個(gè)人理解可能是因?yàn)?lt;img>的float使得z-index失效造成的。網(wǎng)上還有種說法是因?yàn)閒loat和relative兩者在定位上問題，所以一起使用的時(shí)候會(huì)造成此bug。

這個(gè)問題又教育了我們 - 某些環(huán)境(IE6)下也要小心被兄弟坑...

IE6下 select z-index無效而遮擋div

這個(gè)問題其實(shí)在是比較常見的了，我早期做項(xiàng)目的時(shí)候有幸遇見過這個(gè)問題，所以有現(xiàn)成的資料，趁著這次也剛好整理整理、回憶回憶。兩個(gè)解決辦法都是圍繞iframe展開的，咱們先來看第一個(gè)。

1.用 iframe 包裹 select 元素

使用iframe包住select，這樣iframe可以有z-index，只要在div上設(shè)置的z-index比iframe的高即可實(shí)現(xiàn)。示例代碼如下： 

復(fù)制代碼
代碼如下:

<iframe style="z-index:1;position: absolute; ">
<select name="me">
<option value="name">Darren聶微東</option>
<option value="sex">male</option>
<option value="age">secret</option>
</select>
</iframe>

2.以 Iframe 作為div的子元素，覆蓋 select 元素(推薦使用)
建立一個(gè)跟div同寬同高的iframe，并且z-index比div要低。

復(fù)制代碼
代碼如下:

<style type="text/css">
#iframe{
position: absolute;
width: 100%;
height: 100%;
z-index:-1;
}
.text_div{
position: absolute;
left:100px;
top:50px;
width: 300px;
height: 200px;
background : blue;
z-index:100;
}
</style>
<div class="text_div">
<span>這里可以包含其他dom元素</span>
<iframe id="iframe"></iframe>
</div>
注:在這里如果不加src屬性,盡管iframe會(huì)把select擋住,但是由于默認(rèn)iframe為白色,會(huì)影響原來的div背景色。解決方法可以加了一個(gè)空的HTML文件，并把body 的值設(shè)為和原來div背景色一致,這樣就解決了默認(rèn)白色背景色的問題，這里只是一種思路，辦法總比困難多 ^_^。

本文結(jié)語

與很多做國內(nèi)項(xiàng)目的前端一樣，我也會(huì)常常忍不住詛咒IE，可是假如換個(gè)思考方式我們也得感謝它，工作因?yàn)樗庞辛烁嗵魬?zhàn)和成就感。

對(duì)不理解CSS層疊朋友來說 z-index 確實(shí)是一個(gè)大坑，希望這篇文章能夠給那些掉到坑內(nèi)的朋友一些幫助。

如果覺得此文還算用心，請(qǐng)勞駕點(diǎn)擊右下角的推薦，謝謝^.^ 

相關(guān)文章

最新評(píng)論