margin 负值引起的层级(z-index)问题

先来看这么一段代码: [code]div style=height:100px;width:200px; border: solid 1px black; div style=background-color:Red;margin-top: -5px mce_style=background-color:Red;margin-top: -5px a href=&
先来看这么一段代码:

复制代码
代码如下:

<div style="height:100px;width:200px; border: solid 1px black; ">
<div style="background-color:Red;margin-top: -5px " mce_style="background-color:Red;margin-top: -5px ">
<a href="http://www.jb51.net/" mce_href="http://www.jb51.net/">跟版网建站</a></div>
</div>

IE6和IE7下,内层的容器被外层覆盖,如图所示:

在IE8和ff下,外层的容器被内层覆盖,如图所示:

真是疯狂啊,如果要达到IE8的外层的容器被内层覆盖的效果,ie7可以通过触发内层的layout解决,,但是IE6却不行,只能在内层使用position:relative来解决问题,当然position:relative也解决ie7的问题,因为position:relative本身就能触发layout。
看代码:

复制代码
代码如下:

<div style="height:100px;width:200px; border: solid 1px black; ">
<div style="background-color:Red;margin-top: -5px;position:relative" mce_style="background-color:Red;margin-top: -5px;position:relative">
<a href="http://www.jb51.net/" mce_href="http://www.jb51.net/">跟版网建站</a> </div>
</div>

当然要IE8、FF达到IE6、IE7的效果就只要在外层加overflow:hidden 就可以了,看代码

复制代码
代码如下:

<div style="height:100px;width:200px; border: solid 1px black; overflow:hidden ">
<div style="background-color:Red;margin-top: -5px;" mce_style="background-color:Red;margin-top: -5px;">
<a href="http://www.jb51.net/" mce_href="http://www.jb51.net/">跟版网建站</a> </div>
</div>
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

css margin用于设置对象标签之间距离间隔,例如如果要使两个div标签之间有一定的间距,我们可以使用css margin属性来设置。本文章向码农介绍css margin外边距使用方法和实例,需要的朋友可以参考一下。
我们大家都知道,margin:0 auto可以使div水平居中,但有的时候,我们明明为div设置了margin:0 auto,但仍然不取作用。本文章向码农介绍一下margin:0 auto不居中的几个原因。需要的可以参一下。
大家在编写css的时候,明明设置了margin-top属性,但是并没有达到预期效果,而且检查多次也不知道我问题出在哪里。本文对margin-top失效的几种原因进行分析。
span默认是行属性,而div默认是块属性,把span强制设为块属性就可以了。
边框的外面可以有一层边外补白(margin),边外补白可以把块级元素分开.边外补白定义了围绕某种元素(elements)的空白. 可以查看盒模式,了解边外补白和边内补白. 边外补白分为上边外补白(top),下边外补白(bottom),左边外补白(left),右边外补白(right). 边外补白只