要素が2つ並んでいます。この要素をmarginで、重ねることができます。
要素が重なっていない状態。
boxを二つ用意する
今回は上の画像のような例を再現します。
<div class="box1"></div>
<div class="box2"></div>margin-topにマイナス値を入れる
marginにマイナス値を入れることにより、要素同士を重ねることができます。
.box1 {
width: 300px;
height: 300px;
background: #f00;
}
.box2 {
width: 250px;
height: 250px;
background: #00f;
opacity: 0.5;
/* マイナス値のmargin */
margin-top: -50px;
}
注意点としては、基本的にmarginのマイナス値は入らないということ。
必要なポイントにのみ使っていきましょう。(marginがマイナス値取れると知ると色々な箇所にマイナス値をとってしまう方が多いです。)
インスタではそれ以外の小技も紹介
