关于position:relative的另一方面理解

最近一次写页面遇到一个问题,如图:

![0D$)Y6]%%)([email protected]](http://upload-images.jianshu.io/upload_images/2304571-8fd84a948b792693.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
为了解决相连位置边框变粗的问题,对每个单元格

  • 采用了margin-left:-1px;的方式;得到了如下效果:

    F{TFNXW)@GD%V$HCDH5$3PD.png

    然后再在选中的li上设置position:relative;就能完美解决这个问题了!

    5(2K0(CUPAL1{8QDP`$YJPC.png

    这里也就不解释方案了,单独的去看看position:relative;的作用;
    首先,
    当采用了margin-left:-1px之后,右边框没有显示设置效果。
    我的理解是,左移了1px之后,边框更类似于重叠在了一起,而后面的li左边框覆盖了前面对象的右边框。
    然后,
    当在选中元素上添加position:relative之后,该元素右边框就没有被覆盖了。
    此处position:relative的作用是,为了避免某一元素被其他文档流中的元素覆盖。

    html代码如下:


    • 不限

    • 二星/经济

    • 三星/舒适

    • 四星/高档

    • 五星/豪华


    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,由于颜色不利于区分,便重新写了例子,使这个问题更明显、更便于深入。

    关于position:relative的另一方面理解_第1张图片
    [@P44~)P$@}(]5I{{82%V4D.png

    若都设置相对定位relative,其中一个不写top/right/bottom/left,则‘没写的’就会被‘写了的’覆盖,
    若均设置了都写了top/right/bottom/left就按照文档流,后面的覆盖前面的。
    同理,若都没写top/right/bottom/left,仅写了position:relative,也按照文档流,后面的覆盖前面的。
    http://jsbin.com/hovobumazu/edit?html,css,output

    以上为个人理解,欢迎大家讨论!
    转载请注明出处;

  • 你可能感兴趣的:(关于position:relative的另一方面理解)