position中z-index问题

最新推荐文章于 2024-04-24 21:13:53 发布

张运领

最新推荐文章于 2024-04-24 21:13:53 发布

阅读量2.6k

点赞数 1

分类专栏： css 文章标签： css z-index position z-index在ie6下的不兼容

本文链接：https://blog.csdn.net/zyl_lyr1019/article/details/14617727

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文主要是参考了他人关于z-index这个属性在ie6下的bug，加入了一些自己的理解。

z-index这属性在大多数浏览器下，还算是中规中矩的，没有太多的兼容问题（我很少见到...），不过在ie6下，就有两个很大的问题，非常影响界面显示的哦！

ie6下z-index属性不起作用的情况：

直接上代码吧。

<style type="text/css">
#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
</style>

<div id="blank"></div>
<div style="position:relative; z-index:9999;background:red;border:1px solid red;">asd
	<img style="float:left;" src="images/img1.jpg" />
</div>

看下这会怎么样显示：

由这个图片上面的效果，你可以看出几个问题？

1：ie6下，img元素被绝对定位的id=blank的div元素覆盖，在其他浏览器下，img元素却可以显示在id=blank的div元素之上，看似是因为z-index在ie6没有起作用导致的结果。

2：asd内容区域的红色背景，在所有浏览器下，都显示在被绝对定位的id=blank的div元素之上，而asd的元素结点也就是img的父节点，这又说明z-index是起到了作用的。

3：img的父节点，并没有能把float的img元素包含在内，说明父节点没有对其子节点进行浮动清理，那么就必定没有拥有布局。

总结，根据上面说的三条，可以判断，并不是因为z-index在ie6下不起作用而导致了img元素位于被绝对定位的id=blank的div元素之下，主要原因是，相对定位依然属于文档流中，而浮动的img元素，却脱离了文档流。由图中可以看出，img元素并没有被其父元素包含在内。

猜测其原因是：在ie6下，相对定位的属于文档流的元素，和其已经浮动，脱离文档流的元素，是彻底的断开了链接。成为完全不相关的两个元素。

这个问题的解决方法也有三种：1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加position属性（如relative，absolute等）。

据我自己的看法猜测原因是：在ie6下，相对定位的属于文档流的元素，和其已经浮动，脱离文档流的子元素，~~是彻底的断开了链接，成为完全不相关的两个元素。~~（这里说的有点问题，并不是完全不相关，在文章结尾进行补充），它的z-index和父元素的z-index就没有联系了。所以呢，这里给出的三种解决方法，其实就是两个思想：要么你不脱离普通流，要么咱们父子一起脱离，保持一致性，这就叫做，父子齐心，其利断金！！！
换句话说，老版本的z-index属性就像是在古代皇家，皇子走丢了，和家里联系不上，别人也不知道你是皇家的人，自然有点地位的就会欺负皇子了。新版的就不一样了，就算是走丢了，依然有电话，网络等各种手段联系家里，地位依然被认可，存在，稍微有点地位的其他人，想欺负皇子，那也看他有没有这个能耐。
这一切呢，都在说明，ie6已经老去了，赶紧走吧，说拜拜！！

说到上面问题的第三种解决方法，浮动元素添加position属性（如relative，absolute等）。就引出了另外一个问题：z-index在ie6下拼祖先的z-index进行显示的bug。这里就不多说了。如果想要了解，查看下面提到的两篇文章吧。

关于该文章的有些思想是参考了他人文章：IE6下z-index犯癫不起作用bug的初步研究和之前转载的一篇文章：关于z-index的那些事儿

2013.11.9号补充：

前面红色删除线的叙述内容有误，这个时候的父子元素并不是完全断开的。只能说是断了联系，当浮动的子元素同样选择了定位之后，又取得了联系，z-index就实现了它的效果。

#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}
.bc{
	width:500px;
	height:300px;
	background:red;
}

<div id="blank"></div>
<div style="position:relative;background:red;z-index:4;border:1px solid blue;">asd
	<img style="float:left;position:relative;" src="images/img1.jpg" />asdf
</div>
<img style="float:left;position:relative;" src="images/img1.jpg" />

ie6下的显示效果：（img加了相对定位）