CSS 入門

CSS position

CSSにおけるポジショニング（Positioning）は、ウェブページ上の要素の配置方法をコントロールするための強力な手段です。

デフォルトでは、要素はHTMLに記述された順序に従って自然に配置されます（これを「ドキュメントフロー」と呼びます）。しかし、CSSのポジショニングを利用すれば、この通常のフローを打ち破り、要素を望み通りの場所に正確に配置できるようになります。

この章では、static、relative、absolute、fixed の各プロパティ値をカバーし、複雑なウェブデザインを構築するためのツールを提供します。

1. positionプロパティの理解

position プロパティは、要素に使用されるポジショニング方法のタイプを指定します。主に以下の5つの値を受け入れます。

  • static：デフォルト値。要素はドキュメントの通常のフローに従って配置されます。
  • relative：通常の配置位置を基準として、相対的な位置に配置されます。
  • absolute：直近の「位置指定された祖先要素」を基準として配置されます。
  • fixed：ビューポート（ブラウザの表示領域）を基準として配置されます。つまり、ページをスクロールしても同じ位置に留まります。
  • sticky：相対配置と固定配置のハイブリッド（詳細は後のレッスンで紹介します）。

それでは、各値を詳しく見ていきましょう。

2. Static 定位 (スタティック配置)

2.1 Static 定位とは？

static は position プロパティのデフォルト値です。要素が position: static; を持っている場合、その要素はドキュメントの通常のフローに従って配置されることを意味します。HTML構造の中で、本来あるべき場所に自然に現れます。

2.2 Static 定位の仕組み

スタティック配置では、top、right、bottom、left プロパティを設定しても一切効果がありません。要素の位置は、HTML内での順序と周囲の要素によって完全に決定されます。

コード例：

<div class="container">
  <div class="static-element">これはスタティック要素です。</div>
</div>
.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  margin-bottom: 20px;
}
.static-element {
  position: static; /* デフォルトなので本来は不要ですが、デモのために記述します */
  top: 50px; /* 無効 */
  left: 50px; /* 無効 */
  background-color: lightblue;
  padding: 10px;
}

この例では、static-element は container の内部に自然に配置されます。top や left 属性は無視され、機能しません。

2.3 実際の応用

static は一見地味ですが、すべての基準となる重要な値です。要素が通常はスタティック配置であることを理解しておくことで、他の値がどのようにデフォルトの挙動を変更するのかを把握しやすくなります。他のCSSルールによって変更されたポジショニングをリセットするために position: static を使うこともあります。

3. Relative 定位 (相対配置)

3.1 Relative 定位とは？

relative 定位は、要素をドキュメントフロー上の「通常の位置」からオフセット（ずらす）させることができます。相対配置された要素の最大の特徴は、レイアウト上の元のスペースが保持されることです。他の要素は、その要素がまだ元の位置にあるかのように振る舞います。

3.2 Relative 定位の仕組み

position: relative; を設定すると、top、right、bottom、left プロパティを使用して、元の位置を基準に要素を移動させることができます。

コード例：

<div class="container">
  <div class="relative-element">この要素は相対配置です。</div>
  <div class="normal-element">この要素は配置指定なしです。</div>
</div>
.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}
 .relative-element {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: lightgreen;
  padding: 10px;
}
 .normal-element {
  background-color: lightcoral;
  padding: 10px;
}

解説： この例では、relative-element は本来あるべき位置から下に 20px、右に 30px 移動しています。重要なのは、後に続く normal-element は、relative-element が移動していないかのように元の位置に表示される点です（視覚的に重なる可能性があります）。

3.3 実際の応用

相対配置は、周囲の要素に影響を与えずに要素の位置を微調整する際によく使われます。また、より複雑な配置スキームの「基礎」としても頻繁に利用されます（特に絶対配置要素の基準コンテナとして）。

4. Absolute 定位 (絶対配置)

4.1 Absolute 定位とは？

absolute 定位は、要素を通常のドキュメントフローから完全に除外します。絶対配置された要素はページ上でスペースを占有せず、他の要素の配置に影響を与えません（他の要素は、その要素が存在しないかのように配置されます）。

基準となるのは、直近の「位置指定された祖先要素（Positioned Ancestor）」です。位置指定された祖先とは、position の値が static 以外（例えば relative、absolute、fixed など）である祖先要素を指します。

4.2 Absolute 定位の仕組み

position: absolute; を設定し、top、right、bottom、left を使って、基準となる祖先要素からの距離を指定します。もし位置指定された祖先が見つからない場合、初期包含ブロック（通常は <html> 要素、つまりビューポート）を基準に配置されます。

コード例：

<div class="container">
  <div class="absolute-element">この要素は絶対配置です。</div>
  <div class="normal-element">この要素は配置指定なしです。</div>
</div>
.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  position: relative; /* 重要！コンテナを基準にするために指定 */
}
.absolute-element {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: lightsalmon;
}
.normal-element {
  background-color: lightcoral;
  padding: 10px;
}

解説： この例では、container に position: relative; が設定されているため、これが absolute-element の基準となります。その結果、absolute-element は container の上から 20px、右から 20px の位置に配置されます。

重要ヒント： .container の position: relative; を削除すると、absolute-element はページ全体（ビューポート）を基準に配置されるようになります。

4.3 実際の応用

絶対配置は、複雑なレイアウト、オーバーレイ（重ね合わせ）、ツールチップ、ドロップダウンメニュー、あるいはコンテナ内の特定の場所に要素を正確に配置したい場合に非常に強力です。

5. Fixed 定位 (固定配置)

5.1 Fixed 定位とは？

fixed 定位は絶対配置に似ていますが、大きな違いが一つあります。固定要素は常にブラウザのビューポート（画面）を基準に配置されます。つまり、ユーザーがページをスクロールしても、その要素は画面上の同じ位置に留まり続けます。

5.2 Fixed 定位の仕組み

position: fixed; を設定すると、要素はドキュメントフローから外れ、top、right、bottom、left プロパティを使って画面の特定の位置に固定できます。

コード例：

<div style="height: 500px; overflow: auto;">
    <p>スクロール可能なコンテンツ...</p>
    <p>スクロール可能なコンテンツ...</p>
   <div class="fixed-element">この要素は固定されています。</div>
</div>
.fixed-element {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: lightskyblue;
  padding: 10px;
}

解説： この例では、fixed-element は常にビューポートの右下に留まります。ユーザーが長いコンテンツをスクロールしても、位置が変わることはありません。

5.3 実際の応用

固定配置は以下のようなケースでよく使われます：

  • 画面上部に固定されるナビゲーションバー（Sticky Headers）。
  • 「トップへ戻る」ボタン。
  • フローティングチャットウィンドウ。
  • 常に表示しておきたいCTA（コールトゥアクション）ボタン。

6. ポジショニング値の組み合わせ

異なるポジショニング値を組み合わせて、複雑なレイアウトを実現できます。ウェブ開発で最も一般的なテクニックの一つが「子要素 absolute / 親要素 relative」です。親コンテナに position: relative; を設定してポジショニングのコンテキストを作り、その中の子要素に position: absolute; を使ってコンテナ内の好きな場所に精密に配置します。

7. Z-index と重なりコンテキスト

ポジショニングによって要素が重なった場合、z-index プロパティがどの要素を前面に表示するかを決定します。z-index の値が大きいほど、より手前（前面）にスタックされます。なお、z-index プロパティは、位置指定された要素（つまり position が static 以外の要素）に対してのみ有効です。