【CSS/html】divなどの要素を重ねる方法3選

「divとdivを重ねたいんだけどどうやるの？」

「position: absoluteを使わず少しだけ重ねたい」

CSSでdivなどの要素を重ねる方法を3つ紹介します。

ここではdivで紹介していますが、pやh1、ulなどでもOKです。

方法1.divの中にdivがあるとき

divの中にdivがあれば、それらは重なっています。

あとはmarginやpadding等で位置調整しましょう。

<style>
.example{
    border: 1px solid #333;
    background: #a7baf8;
    /*コレ*/padding: 10px;
}
.example div{
    /*コレ*/margin: 20px;
    border: 1px solid #333;
    background: #fad590;
    padding: 10px;
}
</style> 

<div class="example">
    外側のdiv
    <div>内側のdiv</div>
</div>

方法2.divを少しだけ重ねるとき

divのmarginにマイナス値を指定すると要素に重ねることができます。

後述されたdivが上になります。

<style>
.example2{
    border: 1px solid #333;
    background: #a7baf8;
    padding: 20px;
}
.example3{
    /*コレ*/margin: -20px 20px 0;
    border: 1px solid #333;
    background: #fad590;
    padding: 20px;
}
</style> 

<div class="example2">上のdiv</div>
<div class="example3">内側のdiv</div>

方法3.divを自由に重ねるとき

重ねる位置を任意に指定したいときはposition: absoluteを使いましょう。

<style>
.example4{
    border: 1px solid #333;
    background: #a7baf8;
    padding: 40px;
    /*コレ*/position: relative;
}
.example4 div{
    border: 1px solid #333;
    background: #fad590;
    padding: 10px;
    /*コレ*/position: absolute;
    /*コレ*/right: 30px;
    /*コレ*/bottom: -20px;
    width: 100px;
}
</style> 

<div class="example4">
    外側のdiv
    <div>内側のdiv</div>
</div>

まず親要素にposition: relativeを指定し基準とします。

子要素にposition: absoluteを指定します。

あとは「left,top,right,bottom」で位置を指定します。

positionについて詳しくはこちら↓

重なり順を調整するにはこちら↓

【まとめ】divを重ねる方法

divの中にdivがあるとき

すでに重なっているためmarginやpaddingなどで位置調整しましょう。

divを少しだけ重ねるとき

marginにマイナス値を指定しましょう。

divを自由に重ねるとき

position: absoluteを使いましょう。

以上、CSSでdivなどの要素を重ねる方法でした。