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

http://www.codebit.cn/css/negative-margin.html

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

负边距的使用非常简单：



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

如何改变覆盖顺序

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

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

导航高亮效果的实现：

结果：



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

修正 IE 的 bug

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

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