父元素的CSS重叠边框，负边距答案

【问题标题】：CSS overlapping border of parent element, negative margin父元素的CSS重叠边框，负边距
【发布时间】：2015-08-18 00:15:10
【问题描述】：

我有嵌套元素，容器有一种边框样式，我希望其中的一些元素有自己的边框与容器的边框重叠。我尝试使用负边距，但孩子的边框隐藏在父母的下方（似乎是溢出问题）。

HTML：

<div class="right">
    <div class="itemlist">
        <ol>
            <li>Abc</li>
            <li class="special">Abc</li>
            <li>Abc</li>
            <li>Abc</li>
            <li class="special">Abc</li>
            <li>Abc</li>
            <li>Abc</li>
        </ol>
    </div>
</div>

CSS：

.right {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-left: 3px solid #76ff03;
}

.right .itemlist {
    flex: 1;
    overflow-y: auto;
}

.itemlist > ol > li {
    border-bottom: 1px solid #76ff03;
    padding-left: 20px;
}


.itemlist > ol > li:hover, .itemlist > ol > li.special {
    border-left: 10px solid #2196f3;
    border-bottom: 1px solid #2196f3;
    margin-left: -3px;

}

我已经看到了一些这样的例子，并且可以在某些情况下使其工作，但并非始终如一。我有一个带有一些布局的示例 JSFiddle，下面是两个列表元素的外观图片以及我希望它们的外观。

http://jsfiddle.net/jkondratowicz/e6uunLa4/1/

【问题讨论】：

可能不使用边框...可能是框阴影或伪元素。
@Paulie_D 我尝试使用位于左侧的:before 伪元素，但它也隐藏在父边框的“下方”。

标签： html css border

【解决方案1】：

这是一种删除父容器上的边距并将其单独添加到每一行的方法

.right {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    background: #78909c;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.itemlist > ol > li {
    border-bottom: 1px solid #76ff03;

    border-left: 3px solid #76ff03;
    padding-left: 20px;
}

这里是你需要使用 box-shadow 的样式

.itemlist > ol > li {
    box-shadow: inset 3px -1px 0px 0px #76ff03;
    padding-left: 20px;
}

.right .itemlist {
    flex: 1;
    overflow-y: auto;
    box-shadow: inset 3px 0px 0px 0px #76ff03;
}


.itemlist > ol > li:hover, .itemlist > ol > li.special {
    box-shadow: inset 10px -1px 0px 0px #2196f3;
    padding-left: 25px;
}

.right {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    background: #78909c;
    height: 100%;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

http://jsfiddle.net/xnjn17uL/2/

【讨论】：