在线建站培训
您的位置: 魔客吧 网页制作 CSS教程 查看内容

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

2017-7-13 07:57 | 发布者: moke | 栏目:CSS教程

先来看这么一段代码: 

复制代码
代码如下:

<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.moke8.com/" mce_href="http://www.moke8.com/">魔客吧</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.moke8.com/" mce_href="http://www.moke8.com/">魔客吧</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.moke8.com/" mce_href="http://www.moke8.com/">魔客吧</a> </div> 
</div>

魔客吧温馨提示:如果正在寻找登录界面模板,那么到魔客吧的 登录界面模板 频道看看吧,这里有很多的登录界面模板哦!

最新分享资源

最新评论

验证码 换一个