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

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

负边距的使用非常简单：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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>

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

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

如何改变覆盖顺序

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

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

导航高亮效果的实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<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>

1 2 3 4 5 6 7

< 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 像素，这个时候，我们就可以用负边距来解决（并非唯一的办法）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<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>

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