CSS Position

CSS の position プロパティを使用すると、HTML要素の配置方法を制御することができます。

このFixedって書いてるdivは表示例です。後で説明します。

position の種類
例
1. 表示例
2. サンプルコード

position の種類

position プロパティには以下の値があります。

static
relative
absolute
fixed
sticky

1. static (デフォルト)

通常の文書フローに従って配置されます。

top、bottom、left、right プロパティは無視されます。

2. relative

通常の文書フローに従って配置されますが、top、bottom、left、right プロパティを使用して、その位置を相対的に調整できます。

3. absolute

最も近い親要素（position が static 以外の要素）に対して絶対的な位置に配置されます。top、bottom、left、right プロパティで位置を指定できます。

親要素が見つからない場合、<html> 要素が基準になります。

4. fixed

ビューポート（ブラウザウィンドウ）に対して固定された位置に配置されます。

top、bottom、left、right プロパティで位置を指定できます。ページのスクロールに関係なく、要素は常に同じ位置に表示されます。

5. sticky

通常の配置（static）と固定配置（fixed）の中間のような動作をします。

要素は通常の文書フローに従って配置されますが、ビューポート内で指定された範囲を超えると、fixed のように固定されます。

例

以下に、各 position の値の使用例を示します。

表示例

Static

Relative

Absolute

Fixed

サンプルコード

<div class="container">
  <div class="box static">Static</div>
  <div class="box relative">Relative</div>
  <div class="box absolute">Absolute</div>
  <div class="box fixed">Fixed</div>
  <!-- Sticky は、スクロールが必要な場合に効果がわかりやすいため、この例では省略 -->
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: rgba(0, 0, 255, 0.2);
}

.static {
  position: static;
}

.relative {
  position: relative;
  top: 20px;
  left: 20px;
}

.absolute {
  position: absolute;
  top: 40px;
  left: 40px;
}

.fixed {
  position: fixed;
  top: 460px;
  left: 460px;
}

positionの値をabsoluteやfixedに設定した要素は、ページ上で他の要素と重なることがあります。そのため、z-indexプロパティを使用して要素の重なり順を制御することが重要です。