CSSのpositionプロパティ：位置指定の基本から応用まで

Posted on by

ウェブサイトのデザインでは、要素の位置を正確に指定することが非常に重要です。
CSSのpositionプロパティを使用すると、要素の配置を柔軟にコントロールできます。
本記事では、positionプロパティの基本的な仕組み、各値の詳細、具体的な使用例を解説します。

以下の内容でブログ記事を書きます。「CSSのpositionプロパティ」について、詳細な説明と実例を交えて構成します。

positionプロパティとは？

positionプロパティは、要素の位置を指定する際に使用します。
このプロパティを利用すると、要素を親要素やビューポートに対して配置したり、
通常のフローから外して特定の位置に固定したりできます。

基本構文

selector {
  position: value;
}

主な値

static: デフォルトの位置（特に指定がない場合に適用される）。
relative: 元の位置を基準に相対的に移動。
absolute: 親要素（positionが設定されている要素）を基準に絶対位置を指定。
fixed: ビューポートを基準に固定。
sticky: スクロール位置に応じて切り替わる。

各値の詳細解説と使用例

static

概要

staticは、positionのデフォルト値で、特定の位置指定を行わない場合に使用されます。
要素は通常の文書フローに従って配置されます。

使用例

<div class="static-example">Static Element</div>
.static-example {
  position: static;
  background-color: lightblue;
  padding: 10px;
}

特徴

特別な指定がないため、通常の流れに沿って配置される。
一般的には、明示的にstaticを指定することは少ない。

relative

概要

relativeは、要素の元の位置を基準にして、指定された方向に相対的に移動します。

使用例

<div class="relative-example">Relative Element</div>
.relative-example {
  position: relative;
  top: 10px;
  left: 20px;
  background-color: lightgreen;
  padding: 10px;
}

特徴

元の位置が基準となるため、他の要素への影響を最小限に抑える。
子要素の基準位置には影響を与えない。

absolute

概要

absoluteは、親要素（positionが設定されている最も近い祖先要素）を基準にして配置されます。
基準となる親要素がない場合は、ビューポートを基準に配置されます。

使用例

<div class="parent">
  <div class="absolute-example">Absolute Element</div>
</div>
.parent {
  position: relative;
  background-color: lightgray;
  padding: 20px;
}

.absolute-example {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: orange;
  padding: 10px;
}

特徴

親要素に依存するため、配置の自由度が高い。
親要素にpositionが設定されていない場合、ビューポート基準になる。

fixed

概要

fixedは、ビューポートを基準にして配置され、スクロールしてもその位置に固定されます。

使用例

<div class="fixed-example">Fixed Element</div>
.fixed-example {
  position: fixed;
  top: 0;
  right: 0;
  background-color: lightcoral;
  padding: 10px;
}

特徴

ヘッダーやフッター、スクロール位置に関わらず表示され続ける要素（ナビゲーションバーなど）に使用。
他の要素と独立して配置される。

sticky

概要

stickyは、要素が指定されたスクロール位置に達すると固定される、動的な位置指定方法です。

使用例

<div class="sticky-example">Sticky Element</div>
.sticky-example {
  position: sticky;
  top: 10px;
  background-color: lightpink;
  padding: 10px;
}

特徴

スクロール位置に応じて動的に切り替わる。
主にテーブルヘッダーやセクションナビゲーションで使用される。

z-indexとの組み合わせ

positionプロパティと組み合わせて使われることが多いのが、z-indexです。
これにより、要素の重なり順を指定できます。

使用例

<div class="layer1">Layer 1</div>
<div class="layer2">Layer 2</div>
.layer1 {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  background-color: lightblue;
  padding: 10px;
}

.layer2 {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 2;
  background-color: lightgreen;
  padding: 10px;
}

よくある質問

Q1. absoluteとrelativeの違いは？

  • absoluteは親要素を基準に配置されますが、relativeは自分自身の元の位置を基準に配置されます。

Q2. fixedとstickyの違いは？

  • fixedはビューポートに固定されるのに対し、stickyはスクロール位置に応じて動的に切り替わります。

まとめ

positionプロパティを正しく理解し使いこなすことで、
ウェブサイトのレイアウトに多様性を持たせることができます。
各値の特徴と適用シーンを意識して、適切な配置を目指しましょう。

まずは基本のstatic、relativeを学び、次にabsoluteやfixedを試してみると良いでしょう。
最終的に、stickyなどの応用プロパティを使いこなすことが、
プロフェッショナルなデザインへの道を開きます。