HTML の 要素 を 重ねて を 表示する(画面左上からの設置場所指定)

目的

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

押さえるポイント

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

書き方の例

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

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

より具体的な例

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

<h1>おはようございます。</h1>

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

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