Tag Archive for ‘z-index’ at xhlv’s blog

z-index和stacking context的关系及back-to-front原则就不再阐述了，可以看这个：http://www.w3.org/TR/CSS21/visuren.html#z-index，这里主要是探讨ie中z-index负值不隐藏的bug问题。

在默认情况下，在body的子级标签中设置z-index为负值、position为relative，FF中隐藏了这些子级标签，而IE/opera等其他几个浏览器中仍然显示。

<body>
<span style="z-index:-1;position:relative;">z-index:-1;</span>
</body>

在FF2中，会有一个有意思的现象：如果给body一个”z-index:0;position:relative”则span就会显示出来。

正常情况下，子级会以它的stacking context为基准，z-index小于0也会在root stacking context上面，这个可以参考stacking levels。

<div style="position:relative;z-index:0;background:yellow;">z-index:0
	<span style="position:absolute;z-index: 0;margin:5px;background:red;">z-index:0</span>
	<b style="position:absolute;z-index:-1;margin:13px;background: green;">z-index:-1;</b>
</div>

（ stacking context是如何产生的？根元素会形成root stacking context，其他stacking context形成的条件是position不为static和z-index不为auto；在新版本的css中，其他属性也可能形成stacking context，如opacity。
每个box都属于一个stacking context。
一个stacking context中各元素在z轴上的显示顺序由stack level决定，相同stack level的定位元素才由z-index决定次序。）

测试z-index的默认值：（IE默认为0，其他浏览器为auto）

<div id="x">
可以将id加到其他标签上测试，结果是一样的，IE默认始终是0</div>

<script type="text/javascript">
	var o=document.getElementById("x");
	try{
	alert(o.currentStyle.zIndex);
}catch(e){
	alert(window.getComputedStyle(o,null).getPropertyValue('z-index'));
}
</script>

结论：
1.IE确实存在bug，z-index默认为0，其他浏览器为auto，另外IE形成stacking context和z-index无关（IE中有这个问题，FF2/FF3/Netscape/safari/chrome/opera正常）；
2.FF2也存在bug，“z-index值为负值的定位元素”在父级stacking context的背景下面（FF2/Netscape中都有这个问题，FF3/IE/safari/chrome/opera正常）。

Tag Archive for 'z-index'

z-index只是IEbug吗？

Search

Categories

Tags

Twitter

About

Archives

Categories

Admin