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

  1. 首頁 > 云知道 > >

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

云知道

到新地方有些日子了 ， 差不多適應了這邊的工作節(jié)奏與流程 。接到的第一個開發(fā)任務是幾個比較簡單的頁面 ， 需要做的工作就是先把設計圖變成頁面 ， 然后使用PHP創(chuàng)建幾個請求的接口傳遞數(shù)據(jù) ， 標準且簡潔的web開發(fā)思路 ?？墒钦嬗行┤兆記]有寫DIV CSS了 ， 而且對IE6兼容性的坑碰到的還是不夠多(以前做國外項目) ， 所以這次開發(fā)中不可避免的碰見了幾個問題 ， 尤其是在IE下的 z-index 問題很有意思 ， 所以整理了一些資料和總結分享給大家...注：因為引入了jsfiddle ， 所以頁面加載受影響會稍慢一些^_^
閱讀目錄：
z-index屬性
z-index規(guī)范參考
在IE下出現(xiàn)的問題
在IE6下z-index的問題拼爹的時代
萬惡的floatIE6下 select z-index無效而遮擋div用 iframe 包裹 select 元素
以 Iframe 作為div的子元素 ， 覆蓋 select 元素本文結語z-index屬性
z-index : auto | numberz-index 屬性設置元素的堆疊順序 ， 如果為正數(shù) ， 則離用戶更近 ， 為負數(shù)則表示離用戶更遠；擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面；z-index 僅能在定位元素上奏效（position 屬性值為 relative 或 absolute 或 fixed的對象） 。z-index規(guī)范參考
在 W3C CSS2.1 規(guī)范中 ， 每個元素都具有三維的空間位置 ， 除我們所熟悉的水平和垂直位置外 ， 元素還可在 Z軸 方向上層層相疊、依次向前排開；元素在 Z 軸 方向上的呈現(xiàn)順序 ， 由層疊上下文和層疊級別決定 。在文檔中 ， 每個元素僅屬于一個層疊上下文 。在給定的層疊上下文中 ， 每個元素都有一個整型的層疊級別 ， 它描述了在相同層疊上下文中元素在 Z軸 上的顯示順序；同一個層疊上下文中 ， 層疊級別大的顯示在上 ， 層疊級別小的顯示在下 ， 相同層疊級別時 ， 遵循后來居上的原則（back-to-font）；不同層疊上下文中 ， 元素顯示順序以父級層疊上下文的層疊級別來決定顯示的先后順序 。與自身的層疊級別無關；每一個定位元素都歸屬于一個stacking context 。根元素形成 root stacking context ， 而其他的 stacking context 則由定位元素產(chǎn)生（此定位元素的 z-index 被定義一個非 auto 的 z-index 值） ， 定位子元素會以這個 local stacking context 為參考 ， 用相同的規(guī)則來決定層疊順序；當任何一個元素層疊另一個包含在不同 stacking context 元素時 ， 則會以 stacking context 的層疊級別（stack level）來決定顯示的先后情況 。也就是說 ， 在相同的 stacking context 下才會用元素本身的 z-index 來決定先后 ， 不同時則由 stacking context 的父元素的 z-index 來決定 。在IE下出現(xiàn)的問題
當定位元素的 ’z-index’ 未設置時（默認為 auto） ， 在IE6 IE7 IE8(Q)下將會創(chuàng)建一個新的局部層疊上下文 。而在其它瀏覽器下 ， 則嚴格按照規(guī)范 ， 不產(chǎn)生新的局部層疊上下文 。
這個問題將導致定位元素的層疊關系在不同瀏覽器出現(xiàn)很大的區(qū)別 ， 嚴重的可導致頁面布局混亂、內容覆蓋等 。
受影響的瀏覽器有IE6 IE7 IE8(Quriks Mode)
直接從w3help復制了代碼 ， 分析以下代碼：

復制代碼代碼如下:
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

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


注：Q代表Quriks Mode ， 即混雜模式 。
根據(jù) W3C CSS2.1 規(guī)范中的說明 ， 定位元素【p1】和【p3】由于未設置 ’z-index’ 特性（使用默認值 auto） ， 它們不會創(chuàng)建新的局部層疊上下文 ， 而定位元素【p2】設置了 z-index:1 則會創(chuàng)建新的層疊上下文 。

推薦閱讀