positionプロパティを使ってdivを重ねる

HTMLとCSSのpositionプロパティを使ってdivを重ねる方法

position: relativeとposition: absoluteを使う

この方法は、親要素を基準にして子要素の位置を調整する方法です。

手順

1. 親要素に position: relative を指定します。
2. 子要素の top、right、bottom、left プロパティを使って、親要素に対する位置を調整します。

例

<div id="parent">
  <div id="child">
    子要素
  </div>
</div>

#parent {
  position: relative;
}

#child {
  position: absolute;
  top: 10px;
  left: 10px;
}

この例では、#child は #parent の左上から10pxの位置に重ねられます。

注意点

• position: absolute を指定した要素は、親要素の参照座標系に基づいて配置されます。
• 親要素に position: relative を指定していない場合、子要素はブラウザのウィンドウを基準に配置されます。

z-index プロパティは、要素の重なり順を指定するプロパティです。

1. 重ねたい要素に z-index プロパティを指定します。
2. 値が大きい要素ほど前面に表示されます。

<div id="parent">
  <div id="child1">
    子要素1
  </div>
  <div id="child2">
    子要素2
  </div>
</div>

#child1 {
  z-index: 1;
}

#child2 {
  z-index: 2;
}

この例では、#child2 は #child1 の前面に表示されます。

• z-index プロパティは、position プロパティが static 以外の要素にのみ有効です。
• 重なり順序は、親要素の参照座標系に基づいて決定されます。

上記以外にも、flexbox や grid レイアウトを使ってdivを重ねる方法もあります。

HTMLとCSSを使ってdivを重ねるには、いくつかの方法があります。それぞれの方法の特徴を理解して、目的に合った方法を選択してください。

HTML

<div id="parent">
  <div id="child1">
    子要素1
  </div>
  <div id="child2">
    子要素2
  </div>
</div>

CSS

方法1: position: relativeとposition: absoluteを使う

#parent {
  position: relative;
}

#child1 {
  position: absolute;
  top: 10px;
  left: 10px;
}

#child2 {
  position: absolute;
  top: 50px;
  left: 50px;
}

方法2: z-indexを使う

#child1 {
  z-index: 1;
}

#child2 {
  z-index: 2;
}

実行結果

上記以外にも、さまざまな方法でdivを重ねることができます。詳細は以下の参考資料を参照してください。

divを重ねるその他の方法

flexboxは、要素を柔軟に配置するためのレイアウトシステムです。

1. 親要素に display: flex を指定します。
2. 子要素に flex-direction プロパティを使って、配置方向を指定します。
3. 子要素に justify-content と align-items プロパティを使って、子要素の配置を調整します。

<div id="parent">
  <div id="child1">
    子要素1
  </div>
  <div id="child2">
    子要素2
  </div>
</div>

#parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

この例では、#child1 と #child2 は縦方向に並べられ、親要素の中央に配置されます。

• flexboxは、IE 10 以前ではサポートされていません。

gridを使う

1. 子要素に grid-area プロパティを使って、格子上の位置を指定します。

<div id="parent">
  <div id="child1">
    子要素1
  </div>
  <div id="child2">
    子要素2
  </div>
</div>

#parent {
  display: grid;
}

#child1 {
  grid-area: 1 / 1 / 2 / 2;
}

#child2 {
  grid-area: 2 / 2 / 3 / 3;
}