[CSS技巧 | margin负值的使用] 元素水平方向边框叠加处理

常见场景：商品列表块中水平并排的每个块都需要加上边框，由于水平方向上相邻的块都有边框，因此邻接的地方边框会比较粗，需要我们处理。

代码：

<div class="container">
        <ul>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
        </ul>
    </div>

        ul li{
            float:left;
            width: 100px;
            height: 100px;
            list-style: none;
            border: 1px solid lightblue
        }
        ul li:hover {
            border:1px solid tomato;
        }

效果如下：

 

处理方式：

将每个块左移border宽度，盖住前面的边框。
预期效果：

可是真的是这样吗？ 单纯添加 margin-left: -1px 的效果是如下，可以看到当hover的时候，橙色的边框被盖住。

分析：考虑层级z-index问题，我们希望hover的时候层级提升。如果没有定位属性，则可以简单地为 ul li:hover 添加 position: relative，可以提高层级; 如果position是absolute则简单的增加z-index：xx即可。
补充：z-index 属性指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。详细可以查找资料。注意的是z-index只能用于开启定位的元素注意(position:absolute, position:relative, or position:fixed)。

最终代码：

     ul li{
            float:left;
            width: 100px;
            height: 100px;
            /* 使得相邻块水平外边距重叠 */
            margin-left: -1px;
            list-style: none;
            border: 1px solid lightblue
        }
        ul li:hover {
            border:1px solid tomato;
            /* 提高层级，防止颜色被盖住 */
            /* 如果没有定位则relative吧 */
            position: relative;
            /* 如果元素有开启定位则修改层级 */
            z-index: 99;
        }

代码分析：