CSSのmarginにマイナス値を入れると要素を重ねることができる

要素が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がマイナス値取れると知ると色々な箇所にマイナス値をとってしまう方が多いです。)

タイトルとURLをコピーしました