负边距(negative margin)的相关问题整理

<script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

负边距(negative margin)在页面制作过程中，有许多妙用，用的好了能让原本复杂的问题变的简单，本文是针对负边距相关问题的整理，欢迎各位补充。
负边距的使用非常简单：
CSS:
"text/css"> /* 说明：负边距(negative margin)的相关问题整理 整理：CodeBit.cn （ http://www.codebit.cn ） */ .one { height:100px; width:300px; border:2px solid red; margin-bottom:-10px; } .two { height:100px; width:300px; border:2px solid blue; }
HTML:
class="one"> class="two">

这时，我们会看到蓝色的框伸到了红色框的里面，下面总结一些问题：
如何改变覆盖顺序
在本例中，就是如何让红色框覆盖蓝色框，很简单，在需要覆盖到上面的元素样式中添加 ： position:relative; 在本例中，就是要在红色的样式 .one 中添加。

负边距可以用在哪些地方：
导航高亮效果的实现：
CSS:
"text/css"> /* 说明：负边距(negative margin)的相关问题整理 整理：CodeBit.cn （ http://www.codebit.cn ） */ .nav, .nav li { list-style:none; } .nav li { border:2px solid #000; float:left; margin-left:10px; background:#333; padding:3px 20px; margin-bottom:-2px; /* 遮盖下面内容的边框部分 */ position:relative; /* IE 下要添加此行 */ } .nav a { color:#fff; text-decoration:none; } .nav li.current { border-bottom:2px solid #eee; /* 当前的把下边框的颜色换成和下边内容相同的 */ background:#eee; /* 背景的颜色也换成相同的 */ } .nav li.current a {color:#000;} .content { border:2px solid #000; background:#eee; height:100px; width:300px; clear:both; }
HTML:
class="nav"> class="current"> href="">当前 href="">导航 href="">导航 class="content">
结果：

注意：firefox 下面 .nav li 不用加 position:relative; 也能覆盖到下面的 div ，但是 ie 下面要加上。
修正 IE 的 bug
相信大家都很了解 IE 的 3 像素 bug，当浮动元素和非浮动元素相邻时，会增加额外的 3 像素，这个时候，我们就可以用负边距来解决（并非唯一的办法）：
CSS:
"text/css"> /* 说明：负边距(negative margin)的相关问题整理 整理：CodeBit.cn （ http://www.codebit.cn ） */ #floatContent { float: left; width: 300px; } #otherContent { margin-left: 300px; } /* 对 MacIE 隐藏 /*/ * html #floatContent { margin-right: -3px; } * html #otherContent { height: 1%; /* 如果你没有设置 #otherContent 的高度或者宽度 */ margin-left: 0; } /* 隐藏结束 */
这里只是列举了部分和负边距相关的问题，欢迎各位修正、完善。