在CSS中堆疊邊框

Question

我正在用動態生成的子div填充父div。我希望子div受到父級的約束（所以他們不能在填充內容時水平擴展父級的形狀）。同時，我希望孩子的div邊框可以位於父div邊框頂部上的以及相互之間。我扔在一起的圖更好地解釋：

什麼是通過CSS來實現這一目標的最佳方式是什麼？我環顧四周，似乎無法找到一個既能堆疊邊界又能讓父div受限制的子div（在x軸上）的解決方案。

Answer 1

重疊邊框總是有點棘手。在你的情況下，我不建議使用絕對位置和z索引 - 這隻會讓事情變得更加複雜，你將無法再依賴塊元素的原生行爲。

比方說，你的HTML看起來像這樣：

<div class="parent"> 
    <div class="child yellow"></div> 
    <div class="child blue"></div> 
    <div class="child red"></div> 
</div> 

您可以通過只應用頂部邊框的:first-child實現重疊孩子的錯覺。即使你動態地添加更多的div頂端，第一個永遠是這似乎是「上面」的一個：

.child { 
    border-style: solid; 
    border-width: 0 2px 2px 2px; 
    background: white; 
} 

.child:first-child { 
    border-top-width: 2px; 
} 

.yellow { 
    border-color: yellow; 
} 

.blue { 
    border-color: blue; 
} 

.red { 
    border-color: red; 
} 

家長需要一點黑客，因爲如果添加圍繞一個普通邊界它，它會顯示左右的孩子。

.parent { 
    width: 500px; /* or any other width */ 
    height: 100vh; /* or any other fixed height */ 
    overflow-y: auto; /* make scrollable */ 
    box-shadow: inset 2px 2px 0 black, inset -2px -2px 0 black; 
} 

插圖box-shadow在父級內部創建了固體邊界的錯覺。爲了確保它在兒童邊界下方不可見（框陰影往往比邊框稍微模糊），您需要確保兒童具有背景顏色。編號：Here's a demo。

Answer 2

您可以通過z-index影響css中的堆棧順序，但是您需要使用position：absolute或position：固定在這些元素上。

.div1 { 
    width: 200px; 
    height: 100px 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1  
} 
.div2 { 
    width: 200px; 
    height: 100px 
    position: absolute; 
    top: 190px; 
    left: 0; 
    z-index: 2  
} 

該CSS應該顯示.div2 10px的重疊.div1 如果高度是動態的，你可以通過JS將其添加或DIV添加爲孩子在未來。 請注意，每個「職位」屬性都與最近的父母職位相關或絕對有關！

Answer 3

如果我理解你的權利，你可以把使用:after和position absolute父的邊界，與z-index:-1：

.parent { position: relative; } 
.parent:after { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    border: 1px solid black; 
} 

，併爲孩子們，你可以刪除頂部邊框如果不是： 第一：

.child:not(:first-child) { 
    border-top: 0; 
} 

Answer 4

你也可以試試這個。定義兩個不同的類。邊框寬度和樣式的「邊框」類。和一個顏色班。像這樣：

<style> 
    .border { 
       border: 5px solid; 
      } 

    .green { 
      border-color: green; 
      border-top-width: 0px; 
      } 

    .yellow { 
      border-color: yellow; 
      } 
    /*I do not use a border-top-width to remowe top because this is the first div.*/ 

    .red { 
      border-color: red; 
      border-top-width: 0px; 
     } 
</style> 
    <div class="container"> 
     <div class="border yellow">yellow</div> 
     <div class="border green">green</div> 
     <div class="border red">black</div> 

    </div>