positionプロパティを使いこなす

このページの目的

CSSのpositionプロパティを理解し、要素を通常配置から切り離して、自由な位置に配置するテクニックを学びます。
特に、relativeとabsoluteの親子関係をマスターすることが、複雑なレイアウトを組む上での鍵となります。

---

apipositionプロパティの種類

positionプロパティには、主に以下の5つの値を指定できます。

static

初期値。特別な配置は行われず、HTMLの記述順に上から下、左から右へと配置されます。top, left, z-indexなどのプロパティは機能しません。

relative

「相対位置」。本来表示されるべき位置を基準点として、top, leftなどで少しだけ位置をずらすことができます。最も重要な役割は、後述するabsoluteの基準点になることです。

absolute

「絶対位置」。親要素のうち、positionがstatic以外に指定された最も近い要素を基準にして、自由な位置に配置できます。この要素自体は文書の流れから切り離されます。

fixed

「固定位置」。常に画面（ブラウザの表示領域）の特定の位置に固定されます。スクロールしても動きません。固定ヘッダーやモーダルウィンドウで使われます。

sticky

「粘着位置」。スクロール中は通常の要素として振る舞い、特定の場所（例: top: 0;）に到達すると、そこに貼り付いて固定されます。

---

build実装の基本：relativeとabsoluteの親子関係

positionを使いこなす上で最も重要なのが、この親子関係の理解です。

基本的な使い方

親要素にposition: relative;を指定し、その中に配置したい子要素にposition: absolute;を指定するのが基本パターンです。

<!-- HTML -->
<div class="parent">
  親要素（position: relative）
  <div class="child">子要素（position: absolute）</div>
</div>

<!-- CSS -->
.parent {
  position: relative;  /* ★子要素の基準点になる */
  width: 300px;
  height: 200px;
  border: 2px solid #ccc;
}
.child {
  position: absolute;  /* ★親要素を基準に配置される */
  top: 20px;           /* 親要素の上から20px */
  right: 20px;         /* 親要素の右から20px */
  background: #eaf5ff;
  padding: 10px;
}

---

warningよくある間違いと対策

子要素にabsoluteを指定したら、画面の左上に飛んでいってしまった

親要素にposition: relative;が指定されていないのが原因です。absoluteの要素は、基準となる親（positionがstatic以外）が見つかるまで、どんどん上の階層へ基準点を探しに行き、最終的にbodyを基準にしてしまいます。

absoluteを指定した要素のせいで、後続のレイアウトが崩れた

position: absolute;を指定した要素は、元の文書の流れから切り離され、高さが0として扱われます。そのため、後続の要素がその場所に詰めて表示されてしまいます。必要に応じて、親要素に高さを指定したり、後続の要素にmargin-topを指定してスペースを確保しましょう。

---

---