CSSの枠を積み重ね

Question

私は親divを動的に生成された子divで埋めています。子divsが親にバインドされているようにしたいと思います（つまり、内容でいっぱいになると親のシェイプを水平方向に拡張することはできません）。同時に、私は子供のdivの境界線が親divの境界の上にの上にと同様に座るようにしたいと思います。私は一緒に良く説明するための図を投げた：

CSSを経由して、これを達成するための最良の方法は何ですか？私は周りを見回して、私は両方の境界線を積み重ねるソリューションを見つけるように見えることができないだけでなく、親div（x軸上の）によって制限された子divを保持します。

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に上部の境界線を適用することで、重複子どもの錯覚を達成することができます。あなたの周りの定期的な境界線を追加した場合ので、

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

親が少しハックを必要とする：あなたはトップに動的に多くのdivを追加した場合でも、最初のものは、常に「上」のように見えるものになりますそれはの子どもたちの周りにと表示されます。

.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のスタック順序に影響を与えることができますが、絶対位置または位置：これらの要素に固定された位置を使用する必要があります。 CSSは、高さはあなたがJSでそれを追加するか、次の子としてdiv要素に追加するか、動的である場合.div1 を重ね.div2 10pxのを表示する必要があることを

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

。 各「position」属性は、親の親の相対的な位置または絶対的な位置に関連していることに注意してください。

Answer 3

私は右のあなたを理解していれば、あなたはz-index:-1で、:afterとposition absoluteを使用して親の境界を置くことができる： 最初：

.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

あなたもこれを試すことができます。 2つの異なるクラスを定義します。ボーダーの幅とスタイルのための "Border"クラス。そして、カラークラス。このように：

<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>