最近一次写页面遇到一个问题，如图：
![0D$)Y6]%%)(189VO1LEFW@W.png](http://upload-images.jianshu.io/upload_images/2304571-8fd84a948b792693.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
为了解决相连位置边框变粗的问题，对每个单元格<li>采用了margin-left：-1px；的方式；得到了如下效果：
然后再在选中的li上设置position:relative;就能完美解决这个问题了！
这里也就不解释方案了，单独的去看看position:relative;的作用；
首先，
当采用了margin-left：-1px之后，右边框没有显示设置效果。
我的理解是，左移了1px之后，边框更类似于重叠在了一起，而后面的li左边框覆盖了前面对象的右边框。
然后，
当在选中元素上添加position:relative之后，该元素右边框就没有被覆盖了。
此处position:relative的作用是，为了避免某一元素被其他文档流中的元素覆盖。
html代码如下：
<ul class="filterUl clearfix">
<li class="filterActive">不限</li>
<li>二星/经济</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; }
一个有意思的情况，如果两个相邻的盒子里都各有一个position：relative,移动到同一个位置，谁覆盖谁呢？
上例中也是相邻的元素设置position：relative，由于颜色不利于区分，便重新写了例子，使这个问题更明显、更便于深入。
若都设置相对定位relative，其中一个不写top/right/bottom/left，则‘没写的’就会被‘写了的’覆盖，
若均设置了都写了top/right/bottom/left就按照文档流，后面的覆盖前面的。
同理，若都没写top/right/bottom/left，仅写了position:relative，也按照文档流，后面的覆盖前面的。
http://jsbin.com/hovobumazu/edit?html,css,output
以上为个人理解，欢迎大家讨论！
转载请注明出处；
