CSSのトップdivタグを重ねる方法

Question

CSSで次のような効果を実現する方法を教えてください。下の図に示すように、下にdivを、上に上に重なる2つのdivが必要です。

Answer 1

キーが小さいのdivの上の余白を調整することです。それを負の値に設定すると、大きな値に引き寄せられます。以下のコードを参照してください。

また、小さい方のdivを大きい方の行にラップし、下側の余白を調整して下に移動することもできます。 @LiquidchromeのStatensのコメントとして

.under { 
 
    width: 400px; 
 
    height: 150px; 
 
    background-color: #3C77D4; 
 
} 
 

 
.over{ 
 
    background-color: #0E49AC; 
 
    width: 150px; 
 
    height: 150px; 
 
    display: inline-block; 
 
    margin: 0 23px; 
 
    margin-top: -80px; 
 
}

<div class="under"></div> 
 
<div class="over"></div> 
 
<div class="over"></div>

Answer 2

多くの方法があります。

spencerlarryあなたはどのかもしれない幅を定義した場合、それだけで便利です、別のあるここでは、1つの可能な方法を掲載でもここであなた

で計算することが私のコードです：

<div class="container"> 
    <div class="topPane"> 
     <div class="overlappingPane"> 

     </div> 
     <div class="overlappingPane"> 

     </div> 
     <div class="clearPane"> 

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



.container{ 
    display:inline-block; 
} 

.topPane{ 
    width:270px; 
    height: 50px; 
    border: 2px black solid; 
    background-color:red; 
} 

.overlappingPane{ 
    background-color:blue; 
    float:left; 
    width: 90px; 
    height:90px; 
    margin: 20px 20px 20px 20px; 
    border: 2px black solid; 
} 

.clearPane{ 
    clear:both; 
} 

とここにリンクしてください： https://jsfiddle.net/npnz85x0/