負(fù)邊距(negative margin)在頁面制作過程中，有許多妙用，用的好了能讓原本復(fù)雜的問題變的簡單，本文是針對負(fù)邊距相關(guān)問題的整理，歡迎各位補(bǔ)充。
負(fù)邊距的使用非常簡單：
CSS:
"text/css"> /* 說明：負(fù)邊距(negative margin)的相關(guān)問題整理 整理：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">

這時(shí)，我們會(huì)看到藍(lán)色的框伸到了紅色框的里面，下面總結(jié)一些問題：
如何改變覆蓋順序
在本例中，就是如何讓紅色框覆蓋藍(lán)色框，很簡單，在需要覆蓋到上面的元素樣式中添加 ： position:relative; 在本例中，就是要在紅色的樣式 .one 中添加。

負(fù)邊距可以用在哪些地方：
導(dǎo)航高亮效果的實(shí)現(xiàn)：
CSS:
"text/css"> /* 說明：負(fù)邊距(negative margin)的相關(guān)問題整理 整理：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; /* 遮蓋下面內(nèi)容的邊框部分 */ position:relative; /* IE 下要添加此行 */ } .nav a { color:#fff; text-decoration:none; } .nav li.current { border-bottom:2px solid #eee; /* 當(dāng)前的把下邊框的顏色換成和下邊內(nèi)容相同的 */ 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="">當(dāng)前 href="">導(dǎo)航 href="">導(dǎo)航 class="content">
結(jié)果：

注意：firefox 下面 .nav li 不用加 position:relative; 也能覆蓋到下面的 div ，但是 ie 下面要加上。
修正 IE 的 bug
相信大家都很了解 IE 的 3 像素 bug，當(dāng)浮動(dòng)元素和非浮動(dòng)元素相鄰時(shí)，會(huì)增加額外的 3 像素，這個(gè)時(shí)候，我們就可以用負(fù)邊距來解決（并非唯一的辦法）：
CSS:
"text/css"> /* 說明：負(fù)邊距(negative margin)的相關(guān)問題整理 整理：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%; /* 如果你沒有設(shè)置 #otherContent 的高度或者寬度 */ margin-left: 0; } /* 隱藏結(jié)束 */
這里只是列舉了部分和負(fù)邊距相關(guān)的問題，歡迎各位修正、完善。

負(fù)邊距(negative margin)的相關(guān)問題整理