HTML の 要素 を 重ねて を 表示する(基準となる要素からの設置場所指定)

目的

• HTMLファイルの要素同士を重ねて表示する方法をまとめる。

押さえるポイント

• 基準にしたい要素にpositionプロパティでrelativeを与える。
• 重ねたい要素に対してpositionプロパティでabsoluteを与える。
• topプロパティ、rightプロパティを使用して重ねたい要素の位置を指定する。

書き方の例

• 下記にCSSファイルの内容を記載する。

基準となる要素の名前かクラス名 {
  position: relative:
}

重ねたい要素の名前かクラス名 {
  position: absolute;
  top: 左上から設置したい場所への高さのピクセル数;
  right: 左上から設置したい場所への右方向のピクセル数;
}

より具体的な例

• img要素を基準にh1要素を重ねる。
• h1要素をimg要素の上から20ピクセル、左から100ピクセルの所に設置する。
• 基準はimg要素。
• 下記にHTMLファイルの内容を記載する。

<img src="">
<h1>おはようございます。</h1>

• 下記にCSSファイルの内容を記載する。

img {
  position: relative;
}

h1 {
  position: absolute;
  top: 20px;
  right: 100px;
}