css stack divsがお互いの上にあります

Question

私はそれを理解できないようです。私はすべての例と質問を見てきましたが、私はこれらのdivsを互いの上に置くことはできません。

これらは1pxの境界線を持ち、何らかの理由で境界線がdivを右と下に移動します。

ボーダーを無効にすると、すべてのコードが正常に動作することがわかりますが、それらの点線が必要で、divsはそれ以上整列しません。 Z-indexは機能しません、青いdivはontopを表示しません。

https://jsfiddle.net/x1L2jxnx/14/

<style> 
    .content { 
     width: 64px; 
     height: 64px; 
     margin: 32px; 
     background-color: #FFD800; 
     position: relative; 
    } 

    .content div { 
     width: inherit; 
     height: inherit; 
     position: absolute; 
     border-style: dotted; 
    } 

    .margin { 
     border-color: #03A9F4; 
     z-index: 3; 
    } 

    .border { 
     border-color: #black; 
     z-index: 2; 
    } 

    .padding { 
     border-color: #808080; 
     z-index: 1; 
    } 
</style> 

<div class="content"> 
    <div class="margin"> 
    <div class="border"> 
     <div class="padding"> 

     </div> 
    </div> 
    </div> 
</div> 

Answer 1

私は、これはあなたが望むものであると仮定します。 widthには<div>の内部幅が記載されています。境界線の幅がその上に表示されます。したがって、<div>には、継承幅の2倍の境界幅が追加されます。

.content { 
 
    width: 64px; 
 
    height: 64px; 
 
    margin: 32px; 
 
    background-color: #FFD800; 
 
    position: relative; 
 
} 
 

 
.content div { 
 
    top:0; 
 
    bottom:0; 
 
    right:0; 
 
    left:0; 
 
    position: absolute; 
 
    border-style: dotted; 
 
} 
 

 
.margin { 
 
    border-color: #03A9F4; 
 
    z-index: 3; 
 
} 
 

 
.border { 
 
    border-color: #black; 
 
    z-index: 2; 
 
} 
 

 
.padding { 
 
    border-color: #808080; 
 
    z-index: 1; 
 
}

<div class="content"> 
 
    <div class="margin"> 
 
    <div class="border"> 
 
     <div class="padding"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>