CSS重疊父元素的邊框，負邊距

我有嵌套的元素，容器有一種邊框樣式，我希望它內部的一些元素具有自己的邊框，與容器的邊框重疊。我嘗試使用負邊距，但是孩子的邊框隱藏在父親的下方（似乎是溢出問題）。CSS重疊父元素的邊框，負邊距

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/

來源

2015-08-17 jkondratowicz

可能不使用邊界...也許是一個盒子陰影或僞元素。 –

@Paulie_D我嘗試使用位於左側的'：before'僞元素，但它也隱藏在父級邊界的「下方」。 – jkondratowicz

這裏是一個辦法做到這一點移除它的利潤率父容器並將其添加到每一行單獨

.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; 
}

這裏有您需要使用框樣式-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/

來源

2015-08-17 15:55:23

CSS重疊父元素的邊框，負邊距

回答

相關問題