flexboxとgridでレイアウトを柔軟に

2024-04-08

CSSで2つのdivを重ねる方法

<div id="div1">
  <p>Div 1の内容</p>
</div>
<div id="div2">
  <p>Div 2の内容</p>
</div>

CSS

#div1 {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}

#div2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

解説

position プロパティは、要素の表示位置を指定します。
- relative: 要素を元の位置から相対的に移動します。
- absolute: 要素を親要素の左上隅を基準に絶対的な位置に配置します。
top, left, bottom, right プロパティは、要素の相対的な位置を指定します。
- top: 要素の上端を親要素の上端からの距離で指定します。
z-index プロパティは、要素の重なり順序を指定します。

値が大きい要素ほど前面に表示されます。

flexbox を使用して要素を重ねる
grid レイアウトを使用して要素を重ねる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSで2つのdivを重ねる</title>
  <style>
    #div1 {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: red;
    }

    #div2 {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="div1">
    <p>Div 1の内容</p>
  </div>
  <div id="div2">
    <p>Div 2の内容</p>
  </div>
</body>
</html>

実行方法

上記のコードを index.html という名前で保存します。
ブラウザで index.html を開きます。

結果

説明

#div1 は position: relative であり、元の位置から相対的に移動します。
#div2 は position: absolute であり、#div1 の左上隅を基準に絶対的な位置に配置されます。
top: 50px と left: 50px は、#div2 の上端と左端を #div1 の上端と左端からそれぞれ50px離れた位置に配置します。
width: 100px と height: 100px は、#div2 の幅と高さをそれぞれ100pxに設定します。
background-color: blue は、#div2 の背景色を青色に設定します。

margin や padding プロパティを使用して、2つのdivの間隔を調整できます。

CSSで2つのdivを重ねるその他の方法

flexbox

<div class="container">
  <div class="div1">
    <p>Div 1の内容</p>
  </div>
  <div class="div2">
    <p>Div 2の内容</p>
  </div>
</div>

.container {
  display: flex;
}

.div1 {
  background-color: red;
  width: 200px;
  height: 200px;
}

.div2 {
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: auto;
}

display: flex は、親要素をフレックスコンテナに変換します。
margin: auto は、子要素を水平方向に中央に配置します。

grid

<div class="container">
  <div class="div1">
    <p>Div 1の内容</p>
  </div>
  <div class="div2">
    <p>Div 2の内容</p>
  </div>
</div>

.container {
  display: grid;
}

.div1 {
  background-color: red;
  width: 200px;
  height: 200px;
}

.div2 {
  background-color: blue;
  width: 100px;
  height: 100px;
  grid-area: 1 / 1;
}