CSSのpositionプロパティ：absolute、relative、fixedの使い方解説

CSS

CSSのpositionプロパティは、要素の配置方法を指定するための重要なプロパティです。主に以下の4つの値があり、それぞれ異なる方法で要素の位置を制御します。

1. static

デフォルトの値で、要素は通常の文書の流れに従って配置されます。この値では、top、right、bottom、leftプロパティは無効です。

2. relative

要素を通常の位置から相対的に移動させます。top、right、bottom、leftを使って配置を調整しますが、他の要素には影響を与えません。

.element {
  position: relative;
  top: 10px;
  left: 10px;
}

3. absolute

要素を最も近い親要素を基準にして絶対位置に配置します。親要素がposition: relative、absolute、fixedのいずれかでなければ、最も近いpositionが設定された祖先要素を基準にします。指定がなければ、初期コンテナ（ブラウザウィンドウ）を基準にします。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 10px;
  left: 10px;
}

4. fixed

要素をビューポート（画面の表示領域）に対して固定します。スクロールしても位置が変わりません。

.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
}

具体例と応用

  1. 画像の上にテキストを重ねる： 絶対配置を使用して画像の右下にテキストを配置します。
<div class="image-container">
  <img src="example.jpg" alt="Example Image">
  <span class="caption">Sample Text</span>
</div>
.image-container {
  position: relative;
}
.caption {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
}
  1. 固定ヘッダー： ヘッダーをスクロールに関係なく画面の上部に固定します。
<header class="fixed-header">
  Fixed Header
</header>
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

まとめ

CSSのpositionプロパティは、ウェブページのデザインにおいて非常に重要です。static、relative、absolute、fixedの違いを理解し、適切に使い分けることで、効果的なレイアウトを実現できます。実際のプロジェクトでこれらのプロパティを活用し、レイアウトの柔軟性を高めましょう。