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

由 愚人码头 撰写 　

不知道是不是该取这个标题，如有不同意见请留言斧正，谢谢！

先来看这么一段代码：


<div style="height:100px;width:200px; border: solid 1px black; ">
      <div style="background-color:Red;margin-top: -5px ">
        <a href="http://www.css88.com/">愚人码头</a></div>
    </div>

在IE6和IE7下，内层的容器被外层覆盖，如图所示：

2009-05-26_004915；(转载请注明出处：WEB前端开发 http://www.css88.com/)

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

2009-05-26_004929；(转载请注明出处：WEB前端开发 http://www.css88.com/)

真是疯狂啊，如果要达到IE8的外层的容器被内层覆盖的效果，ie7可以通过触发内层的layout解决，，但是IE6却不行，只能在内层使用position:relative来解决问题，当然position:relative也解决ie7的问题，因为position:relative本身就能触发layout。(转载请注明出处：WEB前端开发 http://www.css88.com/)

看代码：


<div style="height:100px;width:200px; border: solid 1px black; ">
      <div style="background-color:Red;margin-top: -5px;position:relative">
        <a href="http://www.css88.com/">愚人码头</a>      </div>
    </div>

 

当然要IE8、FF达到IE6、IE7的效果就只要在外层加overflow:hidden 就可以了，看代码。(转载请注明出处：WEB前端开发 http://www.css88.com/)

<div style="height:100px;width:200px; border: solid 1px black; overflow:hidden ">
      <div style="background-color:Red;margin-top: -5px;">
        <a href="http://www.css88.com/">愚人码头</a>      </div>
    </div>

更多相关链接：

这篇日志由 愚人码头, 发表在 2009年05月26日 于 1:07 上午, 文件归档于 (x)html+css 标签为 and tagged . 添加永久链接到书签中. 获得所有评论更新使用这里的 日志RSS源. 发表评论 或者复制引用通告地址: 引用通告 URL.

或许你对这些感兴趣:

刚刚被浏览过的文章：

3 条评论

  1. robben
    发表了 2009年05月30日 在 12:13 上午 | 永久链接

    跟margin负值有什么关系？是由于父级haslayout造成的裁切

  2. 没事看看
    发表了 2009年07月10日 在 11:03 上午 | 永久链接

    margin不取负值的话，是不会发生遮挡的问题，里面的div会很正常的在外面的div内部

  3. 菲林子
    发表了 2010年08月4日 在 6:18 下午 | 永久链接

    只适用于margin-top ，margin-left就不行了

发表评论

Your email is never shared. 标记为 * 的为必填项目

*
*

评论时，昵称或个人网站填的是商业网站的，一概标记为垃圾评论不予显示，并设置相关网站为过滤关键字，提交到google、百度垃圾网站数据库