CSSの基礎：ポジションプロパティ

Posted on by

CSSのポジションプロパティ（position プロパティ）は、
HTML要素の配置方法を制御するための重要なプロパティです。
position プロパティには、static、relative、absolute、
fixed、sticky の5つの主要な値があります。
これらの値を使用することで、要素の位置を柔軟に設定できます。

position: static

定義

static はデフォルトの位置指定方法であり、要素は文書の通常のフローに従って配置されます。
特に位置を指定しない場合は、この値が適用されます。

特徴

  • 要素は通常の文書フローに従って配置される。
  • top、right、bottom、left プロパティは使用できない。

使用例

css

.static-element {
    position: static;
}

HTML

<div class="static-element">This is a static element.</div>

position: relative

定義

relative は、要素が通常の文書フローに従って配置された後、
自身の元の位置を基準にして相対的に移動することができます。

特徴

  • 要素は通常の位置に配置されるが、top、right、bottom、left プロパティを使用して相対的に移動できる。
  • 元の位置は他の要素に影響を与えたまま残る。

使用例

css

.relative-element {
    position: relative;
    top: 10px; /* 元の位置から10px下に移動 */
    left: 20px; /* 元の位置から20px右に移動 */
}

HTML

<div class="relative-element">This is a relative element.</div>

position: absolute

定義

absolute は、要素が文書フローから取り除かれ、
最近の相対的な親要素（relative、absolute、fixed）を基準にして配置されます。
該当する親要素がない場合は、初期コンテキスト（通常は<html>）を基準に配置されます。

特徴

  • 要素は通常の文書フローから取り除かれる。
  • 位置は、最近の相対的な親要素または初期コンテキストに基づいて決定される。
  • 他の要素に影響を与えない。

使用例

css

.absolute-element {
    position: absolute;
    top: 50px; /* 親要素の上から50px */
    right: 100px; /* 親要素の右から100px */
}

HTML

<div class="absolute-element">This is a relative element.</div>

position: fixed

定義

fixed は、要素がビューポート（ブラウザウィンドウ）を基準に固定され、
スクロールしてもその位置が変わりません。

特徴

  • 要素はビューポートを基準に配置される。
  • スクロールしても位置が固定される。
  • 通常の文書フローから取り除かれる。

使用例

css

.fixed-element {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: yellow;
}

HTML

<div class="fixed-element">This is a fixed element.</div>

position: sticky

定義

sticky は、要素がスクロール位置に応じて、
通常の文書フローに従いながら固定される位置を持つことができる特性です。

特徴

  • 要素は通常の位置に配置されるが、指定されたオフセットを超えると固定される。
  • スクロールに応じて動的に変わる。

使用例

css

.sticky-element {
    position: sticky;
    top: 0; /* スクロールしてもビューポートの上部に固定される */
    background-color: lightblue;
}

HTML

<div class="sticky-element">This is a sticky element.</div>

まとめ

CSSのポジションプロパティは、要素の位置を柔軟に制御するための重要なプロパティです。
static はデフォルトの位置指定方法で、relative は要素を通常の位置から相対的に移動できます。absolute は親要素を基準にして要素を文書フローから取り除き、
fixed はビューポートに固定された位置に要素を配置します。
sticky はスクロール位置に応じて要素を固定する特性を持ちます。
これらのプロパティを適切に使用することで、複雑なレイアウトを作成することができます。