ie下的css堆叠z

2021-03-10 18:04 jianzhan

到新地区一些生活了,类似融入了这边的工作中节奏与步骤。接到的第1个开发设计每日任务是几个较为简易的网页页面,必须做的工作中便是先把设计方案图变为网页页面,随后应用PHP建立几个恳求的插口传送数据信息,规范且简约的web开发设计思路。但是真一些生活沒有写DIV+CSS了,并且对IE6适配性的坑碰到的還是不足多(之前做海外新项目),因此这次开发设计中不能防止的碰见了几个难题,特别是在IE下的 z-index 难题很成心思,因此梳理了1些材料和总结共享给大伙儿...注:由于引进了jsfiddle,因此网页页面载入受危害会稍慢1些^_^

阅读文章文件目录:

    z-index特性
    z-index标准参照
    在IE下出現的难题
    在IE6下z-index的难题
      >拼爹的时期
      >万恶的float 
    IE6下 select z-index失效而遮挡div
      >用 iframe 包裹 select 元素
      >以 Iframe 做为div的子元素,遮盖 select 元素
    本文结语 

z-index特性

    z-index : auto | numberz-index 特性设定元素的层叠次序,假如为正数,则离客户更近,为负数则表明离客户更远;有着更高层叠次序的元素一直会处在层叠次序较低的元素的前面;z-index 仅能在精准定位元素上见效(position 特性值为 relative 或 absolute 或 fixed的目标)。

z-index标准参照

在 W3C CSS2.1 标准中,每一个元素都具备3维的室内空间部位,除大家所熟习的水平静竖直部位外,元素还可在 "Z轴" 方位顶层层相叠、先后向前排开; 元素在 "Z 轴" 方位上的展现次序,由堆叠左右文和堆叠级別决策。在文本文档中,每一个元素仅属于1个堆叠左右文。在给定的堆叠左右文中,每一个元素都有1个整型的堆叠级別,它叙述了在同样堆叠左右文中元素在 "Z轴" 上的显示信息次序;同1个堆叠左右文中,堆叠级別大的显示信息在上,堆叠级別小的显示信息在下,同样堆叠级別时,遵照后来者居上的标准(back-to-font);不一样堆叠左右文中,元素显示信息次序以父级堆叠左右文的堆叠级別来决策显示信息的前后次序。与本身的堆叠级別不相干;每个精准定位元素都属于1个stacking context。根元素产生 root stacking context,而别的的 stacking context 则由精准定位元素造成(此精准定位元素的 z-index 被界定1个非 auto 的 z-index 值),精准定位子元素会以这个 local stacking context 为参照,用同样的标准来决策堆叠次序;当任何1个元素堆叠另外一个包括在不一样 stacking context 元素时,则会以 stacking context 的堆叠级別(stack level)来决策显示信息的前后状况。也便是说,在同样的 stacking context 下才会用元素自身的 z-index 来决策前后,不一样时则由 stacking context 的父元素的 z-index 来决策。

在IE下出現的难题

当精准定位元素的 'z-index' 未设定时(默认设置为 auto),在 IE6 IE7 IE8(Q) 下可能建立1个新的部分堆叠左右文。而在其它访问器下,则严苛依照标准,不造成新的部分堆叠左右文。

这个难题将致使精准定位元素的堆叠关联在不一样访问器出現很大的差别,比较严重的可致使网页页面合理布局错乱、內容遮盖等。

受危害的访问器有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>

注:Q意味着Quriks Mode,即掺杂方式。

依据 W3C CSS2.1 标准中的表明,精准定位元素【p1】和【p3】因为未设定 'z-index' 特点(应用默认设置值 auto),它们不容易建立新的部分堆叠左右文,而精准定位元素【p2】设定了 z-index:1 则会建立新的堆叠左右文。

另,在同1根堆叠左右文中,同为 z-index:auto 的精准定位元素【p1】和【p3】,它们的堆叠级別同样,但【p3】在【p1】以后,因此在 Z 轴上【p3】比【p1】靠前显示信息,又,【p2】堆叠左右文的堆叠级別为正数,因此【p2】的堆叠级別要比【p3】高。因而,它们在 Z 轴上的次序为:(遵照 back-to-font)【p1】 -> 【p3】 -> 【p2】

以上为规范访问器下的状况。

而在 IE6 IE7 E8(Q) 下,精准定位元素【p1】和【p3】都建立了新的部分堆叠左右文,在同1根堆叠左右文中,它们的堆叠级別同样,但【p3】在【p1】以后,因此在 Z 轴上【p3】比【p1】靠前显示信息。此时,因为【p2】处在【p1】的堆叠左右文中,因此【p2】在 Z 轴上要比【p3】靠后。

在来1个事例:

拷贝编码
编码以下:

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

处理方法

了解堆叠左右文、堆叠级別与 'z-index' 之间的关联。在将会出現精准定位元素互相遮盖的状况时,确立特定精准定位元素的 'z-index' 特点,防止此难题的出現。

:此段內容基础全是来自w3help。

在IE6下z-index的难题

我并不是1个喜爱埋怨的人,so...相关埋怨IE6的话在此省略500字...

先上个图说说我在工作中中具体遇到的难题:

照片的上半一部分便是在非IE6下的互动,照片下半一部分是在IE6下的显示信息实际效果,当开启虚似机检测的情况下我表明一瞬间堡垒了,囧...在IE6下这个tips被盖住了,很显著这个并不是我要想的实际效果,但是为何会出現这个状况类?接着往下看。

剖析此类难题的缘故

1.这是个拼爹的时期,在IE6下很好的反映了这点...囧

依照一切正常的逻辑思维,z-index等级越高,內容越应当在上面显示信息,在绝大多数的访问器在绝大多数的状况下,的确这般,可是绵绵不绝对。特别遇到IE6。

在IE6下的等级高矮不但要看自身,还要看自身的父元素是不是给力:父元素的 position 特性为 relative或absolute 时,子元素的 absolute 特性是相对父元素而言的。而在IE6下的等级的主要表现有时并不是看子元素的 z-index 多高,而要看它们的父元素的 z-index 谁高谁低。点一下 Result 能够看到HTML对应的VIEW。

从以上的编码中能够看到最里层<div>的z-index特性为999,其父元素的z-index特性为100。依照一切正常的显示信息逻辑性,照片应当一切正常显示信息且不容易被情况色所危害,但是在IE6下会有难题,立即上照片会较为直观,较为看看IE6下和非IE6访问器的显示信息实际效果。chrome、FF和opera都历经检测了,以便不使照片过量我就拿个chrome的截图吧。

重现这个bug的标准很简易,要是肯定精准定位(position:absolute)<div>的先祖元素,或说是最顶级的先祖元素的 relative 特性小于黑色半全透明层的z-index等级便可。处理方法也很简易,只必须给的先祖元素再加z-index便可以。

为具备 relative 特性的顶级先祖元素打了鸡血(加了z-index)后,IE6下终究一切正常显示信息了。这个难题很实际的文化教育了大家 - 在拼爹拼但是的标准下大家只能靠自身勤奋...

IE6下拼爹的难题也便是我在具体开发设计中碰到的难题,如今早已完善处理且做到要求的实际效果了。接下来要详细介绍的是1些我总结的材料,全是详细介绍在IE自然环境下得各种各样z-index的坑。

 2.万恶的float

float 是 css 的精准定位特性,并且应当是CSS中最常见的特性之1了,至于为何说它万恶等我改日去提前准备1篇文章内容独立开展解說,在这里借着之前的学习培训笔记简易说几点:

1. IE7 中,底边距 bug是当波动父元素有波动子元素时,这些子元素的底边距会被父元素忽视掉;

2. 3像素间隔是指挨着波动元素的文字会奇异的被踢出去3像素,仿佛波动元素的周边有1个怪异的力场1样;

3. 双倍边距bug解决 IE6 时,另外一个必须记牢的事儿是,假如在和波动方位同样的方位上设定外边距(margin),会引起双倍边距。

相关float的扫盲就先到这里,也有1点便是float终究是规范的特性,并且大多数数的前端开发都习惯性用它去完成网页页面,因此我的提议便是:深层次了解 HTML词义和主要表现。

接着刚开始讲述 z-index和float 在IE6自然环境下擦出的坑爹的火苗...先上1段编码:

拷贝编码
编码以下:

<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>有设定float特性,上面这段编码显示信息的实际效果与IE6下拼爹不成功1样,IE6下的犀牛书是灰色的 T.T 。以便让犀牛书一切正常显示信息,只必须把<img>的float特性去掉便可。

本人了解将会是由于<img>的float使得z-index无效导致的。在网上也有种说法是由于float和relative二者在精准定位上难题,因此1起应用的情况下会导致此bug。

这个难题又文化教育了大家 - 一些自然环境(IE6)下也要当心被弟兄坑...

IE6下 select z-index失效而遮挡div

这个难题实际上在是较为普遍的了,我初期做新项目的情况下荣幸遇见过这个难题,因此有现成的材料,趁着这次也恰好梳理梳理、追忆追忆。两个处理方法全是紧紧围绕iframe进行的,我们先看来第1个。

1.用 iframe 包裹 select 元素

应用iframe包住select,这样iframe能够有z-index,要是在div上设定的z-index比iframe的高便可完成。示例编码以下: 

拷贝编码
编码以下:

<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 元素(强烈推荐应用)
创建1个跟div同宽同高的iframe,而且z-index比div要低。

拷贝编码
编码以下:

<style type="text/css">
#iframe{
position: absolute;
width: 100%;
height: 100%;
z-index:⑴;
}
.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会把select挡住,可是因为默认设置iframe为白色,会危害原先的div情况色。处理方式能够加了1个空的HTML文档,并把body 的值设为和原先div情况色1致,这样就处理了默认设置白色情况色的难题,这里只是1种思路,方法总比艰难多 ^_^。

本文结语

与许多做中国新项目的前端开发1样,我也会经常禁不住诅咒IE,但是倘若换个思索方法大家也得谢谢它,工作中由于它才有了更多挑戰和造就感。

对没理解CSS堆叠盆友来讲 z-index 的确是1个大坑,期待这篇文章内容可以给那些掉到坑内的盆友1些协助。

假如感觉此文还算认真,请劳驾点一下右下角的强烈推荐,感谢^.^