當邊框不在ul元素上時如何遮蓋活動選項卡上的邊框

Question

當在ul元素上設置邊框（如this，在選項卡元素上設置margin-right: -1px）時，我知道如何去除（覆蓋）活動選項卡上的邊框。

但是，如何在邊框位於另一個面板上時執行此操作？我設置了margin-right: -1px，但它沒有任何意義......

Here is the demo，我想打破活動選項卡和右側面板之間的邊界。

Answer 1

您需要設置position: relative和z-index把面板

li { 
    color: #999; 
    border: 1px solid #999; 
    border-right-color: transparent; 
    margin-bottom: 20px; 
    /* add these two rules */ 
    position: relative; 
    z-index: 2; 
} 

Answer 2

上面的李可以有多種解決方案。首先要確保選項卡位於內容面板上方，並且其右邊界重合。然後，您可以爲與面板的背景顏色相同的右邊框着色，即白色。如此處所示https://jsfiddle.net/6fnL13w4/1/

.left { 
    width: 20%; 
    margin-top: 50px; 
    margin-right: -1px; 
    float: left; 

    z-index:1; 
    position:relative; 
} 
li.active { 
    background-color: #fff; 
    border-right-color: #fff; 
} 

Answer 3

我想你忘了設置position屬性。只要加上position:relative它應該可以正常工作。