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


负边距的使用非常简单：

CSS:
  1.  
  2. <style type="text/css"> 
  3. /* 
  4. 说明：负边距(negative margin)的相关问题整理  
  5. 整理：CodeBit.cn （ http://www.codebit.cn ） 
  6. */
  7. .one {
  8. height:100px; 
  9. width:300px; 
  10.     border:2px solid red; 
  11. margin-bottom:-10px; 
  12. }
  13. .two {
  14. height:100px; 
  15. width:300px; 
  16.     border:2px solid blue; 
  17. }
  18. </style> 
  19.  


HTML:
  1.  
  2. <pclass="one"></p>
  3. <pclass="two"></p>
  4.  





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

如何改变覆盖顺序


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



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


导航高亮效果的实现：

CSS:
  1.  
  2. <style type="text/css"> 
  3. /* 
  4. 说明：负边距(negative margin)的相关问题整理  
  5. 整理：CodeBit.cn （ http://www.codebit.cn ） 
  6. */
  7. .nav, .nav li {
  8. list-style:none; 
  9. }
  10. .nav li {
  11.     border:2px solid #000; 
  12. float:left; 
  13. margin-left:10px; 
  14. background:#333; 
  15.     padding:3px 20px; 
  16. margin-bottom:-2px; /* 遮盖下面内容的边框部分 */
  17. position:relative; /* IE 下要添加此行 */
  18. }
  19. .nav a {
  20. color:#fff;  
  21. text-decoration:none; 
  22. }
  23. .nav li.current {
  24.     border-bottom:2px solid #eee; /* 当前的把下边框的颜色换成和下边内容相同的 */
  25. background:#eee; /* 背景的颜色也换成相同的 */
  26. }
  27. .nav li.current a {color:#000;}
  28. .content{
  29.     border:2px solid #000; 
  30. background:#eee; 
  31. height:100px; 
  32. width:300px; 
  33. clear:both; 
  34. }
  35. </style> 
  36.  


HTML:
  1.  
  2. <ulclass="nav">
  3. <liclass="current"><ahref="">当前</a></li>
  4. <li><ahref="">导航</a></li>
  5. <li><ahref="">导航</a></li>
  6. </ul>
  7. <divclass="content">
  8. </div>
  9.  


结果：



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

修正 IE 的 bug

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

CSS:
  1.  
  2. <style type="text/css"> 
  3. /* 
  4. 说明：负边距(negative margin)的相关问题整理  
  5. 整理：CodeBit.cn （ http://www.codebit.cn ） 
  6. */
  7. #floatContent {
  8. float: left; 
  9. width: 300px; 
  10. }
  11. #otherContent {
  12. margin-left: 300px; 
  13. }
  14. /* 对 MacIE 隐藏 \*/
  15. * html #floatContent {
  16. margin-right: -3px; 
  17. }
  18. * html #otherContent {
  19. height: 1%; /* 如果你没有设置 #otherContent 的高度或者宽度 */
  20. margin-left: 0; 
  21. }
  22. /* 隐藏结束 */
  23. </style> 
  24.  


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