网站建设   网站建设技术   网页设计   html/css  

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

人浏览  发布时间:2021-04-24

先来看这么一段代码: 复制代码 代码如下: 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=https://www.jb51.net/ mce_href=https://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=https://www.jb51.net/ mce_href=https://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=https://www.jb51.net/...
先来看这么一段代码: 

复制代码
代码如下:

<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="https://www.jb51.net/" mce_href="https://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="https://www.jb51.net/" mce_href="https://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="https://www.jb51.net/" mce_href="https://www.jb51.net/">脚本之家</a> </div> 
</div>
点击浏览下载讲义资料
(编辑:360°搜索建站)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:广东省深圳市宝安区西乡街道东方商务大厦 WebDesign ©2012 Corporation 360°搜索建站网 网站地图