ie6 z

日期:2021-03-03 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

1、定义

z-index随着着层的定义造成的。网页页面中,层的定义与photoshop或是flash中层的定义是1致的。熟习photoshop或是flash的应当了解,等级越高(涂层越靠上),越在上面显示信息,假如层产生重合,等级高的会遮盖等级低的,假如非全透明或半全透明,则会遮挡。

在photoshop中

层的高矮便是靠手动式调的,电脑鼠标拖拽,或是ctrl+]或是ctrl+shift+[便捷键更改层的顺序。以下图,电脑鼠标拖移更改层级序的全过程中:

在flash中

相近,能够手动式更改涂层顺序,或是应用as脚本制作,比如:器皿目标.setChildIndex(显示信息目标,0)便是让目标最底层显示信息,而器皿目标.setChildIndex(显示信息目标,器皿目标.numChildren⑴)便是最上面显示信息。

在CSS中

Z-index特性决策了1个HTML元素的堆叠级別。元素堆叠级別是相对元素在Z轴上(与X轴Y轴相对性照)的部位而言。1个更高的Z- index值代表着这个元素在叠层次序中会更挨近顶部。这个堆叠次序沿着竖直的线轴被展现。明显,只能根据编码更改等级,这个特性便是z-index,要 让z-index起功效有个小小的前提条件,便是元素的position特性如果relative,absolute或是fixed。下为z-index的示意 图:


依照一切正常的逻辑思维,z-index等级越高,內容越应当在上面显示信息。在绝大多数的访问器在绝大多数的状况下,的确这般,可是绵绵不绝对。特别遇到IE6,这家伙,估算是后妈带大的,从小营养成分欠佳,結果后来身心健康难题1堆又1堆。z-index的难题便是在其中之1,而本文便是要讲讲这个IE6下z-index不起功效的难题。

2、有关实际效果截图的些必要表明

1、网页页面上固定不动没动的1个黑色情况,全透明度40%,基本上满屏显示信息的等级为1的肯定精准定位层。
HTML为:<div id=”blank”></div>
对应CSS为:#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
功效是以便让等级关联1目了然。看:


这表明內容在z-index为1的肯定精准定位层之下。


这表明內容在z-index为1的肯定精准定位层之上。
2、网页页面上做比照的是漂亮美女照片,照片在半全透明黑色肯定精准定位层的上面還是下面很非常容易鉴别,这样,您就可以够对我所说的z-index不起功效有很直观的了解了。

3、IE6的埋怨:波动让我沉溺

最先讲讲第1种z-index不管设定多高都不起功效状况。

这类状况产生的标准有3个:

1、父标识 position特性为relative;
2、难题标识无position特性(不包含static);
3、难题标识含有波动(float)特性。

您能够拿下面的编码自身做个简易检测:
<div id=”blank”></div>
<div style=”position:relative; z-index:9999;”>
<img style=”float:left;” src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
</div>
z-index都9999了,等级够高吧,可是,看下面的图:



如今去掉波动,HTML编码以下:
<div id=”blank”></div>
<div style=”position:relative; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
</div>
結果IE6下:


将外界div的position:relative特性改成 absolute能够处理这1难题
处理方式有3,1、position:relative改成position:absolute;2、除去波动;3、波动元素加上position特性(如relative,absolute等)。

4、固执己见的IE6:它只认第1个爸爸

用术语实际叙述为:
父标识position特性为relative或absolute时,子标识的absolute特性是相对父标识而言的。而在IE6下,等级的主要表现有时并不是看子标识的z-index多高,而要看它们的父标识的z-index谁高谁低。
可是,坚信这里边许多人不了解道IE6下,决策等级高矮的并不是当今的父标识,而是全部DOM tree(连接点树)的第1个relative特性的父标识。有时平常大家多解决1个父标识,z-index等级多而繁杂的状况很少见,因此免不了会有了解上的小小的误差。

比如下面的HTML编码:
<div id=”blank”></div>
<div style=”position:relative;”>
<div style=”position:relative;z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg” />
</div>
</div>
</div>
能够看到,mm3照片的父标识div 是肯定精准定位,等级9999,比1大多数了,肯定精准定位的父标识等级1000(10000也1样),也比黑色半全透明层的z-index:1大多数了,可是,大家可伶的IE6童鞋——



IE7与IE6拥有一样的bug,缘故很简易,尽管照片所属div当今的老爸等级很高(1000),可是因为老爸的老爸不管用,可伶了9999这般强势的孩子沒有左右之日啊!


了解缘故处理就很轻轻松松了,给第1任老爸加上z-index后的HTML编码以下:

<div id=”blank”></div>
<div style=”position:relative;z-index:1;“>
<div style=”position:relative; z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg” />
</div>
</div>
</div>

結果IE6童鞋喜不自胜,春色璀璨:

5、总结

z-index这东西高深莫测,里边所包含的专业知识并不是 CSS手册上的那点物品,那只是冰山1角。这涉及到到border及background的层叠实体模型,涉及到到同等级的显示信息难题,和访问器显示信息的些体制等, 这是很深的1潭水。

以上这篇ie6 z-index不起功效的完善处理方式便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。