最近一次寫(xiě)頁(yè)面遇到一個(gè)問(wèn)題，如圖：
![0D$)Y6]%%)(189VO1LEFW@W.png](http://upload-images.jianshu.io/upload_images/2304571-8fd84a948b792693.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
為了解決相連位置邊框變粗的問(wèn)題，對(duì)每個(gè)單元格<li>采用了margin-left：-1px；的方式；得到了如下效果：
然后再在選中的li上設(shè)置position:relative;就能完美解決這個(gè)問(wèn)題了！
這里也就不解釋方案了，單獨(dú)的去看看position:relative;的作用；
首先，
當(dāng)采用了margin-left：-1px之后，右邊框沒(méi)有顯示設(shè)置效果。
我的理解是，左移了1px之后，邊框更類似于重疊在了一起，而后面的li左邊框覆蓋了前面對(duì)象的右邊框。
然后，
當(dāng)在選中元素上添加position:relative之后，該元素右邊框就沒(méi)有被覆蓋了。
此處position:relative的作用是，為了避免某一元素被其他文檔流中的元素覆蓋。
html代碼如下：
<ul class="filterUl clearfix">
<li class="filterActive">不限</li>
<li>二星/經(jīng)濟(jì)</li>
<li>三星/舒適</li>
<li>四星/高檔</li>
<li>五星/豪華</li>
</ul>
CSS代碼如下：
.filterUl{ width: 100%; font-size: 0; padding-left: 4px; } .filterUl li{ display: block; font-size: 8px; float: left; border:1px solid #eee; line-height: 35px; height: 35px; box-sizing: border-box; text-align: center; margin-left: -1px; width:20%; } .filterUl>.filterActive{ border-color:#3BB711; background: #E8FFEF; position:relative; }
一個(gè)有意思的情況，如果兩個(gè)相鄰的盒子里都各有一個(gè)position：relative,移動(dòng)到同一個(gè)位置，誰(shuí)覆蓋誰(shuí)呢？
上例中也是相鄰的元素設(shè)置position：relative，由于顏色不利于區(qū)分，便重新寫(xiě)了例子，使這個(gè)問(wèn)題更明顯、更便于深入。
若都設(shè)置相對(duì)定位relative，其中一個(gè)不寫(xiě)top/right/bottom/left，則‘沒(méi)寫(xiě)的’就會(huì)被‘寫(xiě)了的’覆蓋，
若均設(shè)置了都寫(xiě)了top/right/bottom/left就按照文檔流，后面的覆蓋前面的。
同理，若都沒(méi)寫(xiě)top/right/bottom/left，僅寫(xiě)了position:relative，也按照文檔流，后面的覆蓋前面的。
http://jsbin.com/hovobumazu/edit?html,css,output
以上為個(gè)人理解，歡迎大家討論！
轉(zhuǎn)載請(qǐng)注明出處；
