首页 > 开发 > CSS > 正文

margin 负值引起的层级（z-index）问题

2020-01-05 13:30:37

字体：大中小

来源：转载

供稿：网友

先来看这么一段代码：

复制代码

代码如下:

<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.CuoXin.com/" mce_href="https://www.CuoXin.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="https://www.CuoXin.com/" mce_href="https://www.CuoXin.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="https://www.CuoXin.com/" mce_href="https://www.CuoXin.com/">错新网</a> </div>
</div>

上一篇：IE8的css hack /9 使用说明

下一篇：比较全的CSS浏览器兼容问题整理总结

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

重庆棒棒10年用肩膀扛出一套房，你呢？

2020-01-05 09:36:19

雷军2020新年全员信：“5G+AIoT”五年投500亿

2020-01-03 21:44:07

春运售票超3亿张！售票总量再创历史新高

2020-01-03 20:41:57

传理想汽车秘密申请美国IPO 筹集至少5亿美元

2020-01-03 20:38:28

Windows10市场份额全球第一微软是否再无敌手？

2020-01-03 20:32:15

比尔盖茨一次错误，付出2.8万亿的代价

2020-01-02 08:44:42

疑难解答

图片精选

网友关注