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

负边距(negative margin)在页面制作过程中，有许多妙用，用的好了能让原本复杂的问题变的简单，本文是针对负边距相关问题的整理，欢迎各位补充。

负边距的使用非常简单：

<style type="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;
}
</style>

<p class="one"></p>
<p class="two"></p>

这时，我们会看到蓝色的框伸到了红色框的里面，下面总结一些问题：

如何改变覆盖顺序

在本例中，就是如何让红色框覆盖蓝色框，很简单，在需要覆盖到上面的元素样式中添加 ： position:relative; 在本例中，就是要在红色的样式 .one 中添加。

负边距可以用在哪些地方：

导航高亮效果的实现：

<style type="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;
}
</style>

<ul class="nav">
	<li class="current"><a href="">当前</a></li>
	<li><a href="">导航</a></li>
	<li><a href="">导航</a></li>
</ul>
<div class="content">
</div>

结果：

注意：firefox 下面 .nav li 不用加 position:relative; 也能覆盖到下面的 div ，但是 ie 下面要加上。

修正 IE 的 bug

相信大家都很了解 IE 的 3 像素 bug，当浮动元素和非浮动元素相邻时，会增加额外的 3 像素，这个时候，我们就可以用负边距来解决（并非唯一的办法）：

<style type="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;
}
/* 隐藏结束 */
</style>

这里只是列举了部分和负边距相关的问题，欢迎各位修正、完善。