CSS/position

positionプロパティ

CSSのpositionプロパティは、要素を文書内でどのように配置するかを指定するものです。top、right、bottom、leftプロパティと組み合わせることで、要素の最終的な位置を調整します。この章では、positionプロパティの基本的な使い方から具体的な例まで、詳細に説明します。

基本構文

/* positionプロパティの指定可能な値 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* グローバル値 */
position: inherit;
position: initial;
position: revert;
position: unset;

各値の説明

1. static（デフォルト値）

staticは、要素が通常の文書フローに従って配置されることを意味します。この場合、top、right、bottom、leftプロパティやz-indexは無視されます。

例

HTML

<div class="box">Static</div>

CSS

.box {
  position: static;
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

2. relative（相対配置）

要素は通常の文書フローに従って配置され、その位置を基準にtop、right、bottom、leftプロパティで相対的にオフセットします。オフセットしても、他の要素の位置には影響を与えません。

例

HTML

<div class="box" id="relative-box">Relative</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

#relative-box {
  position: relative;
  top: 20px;
  left: 30px;
}

出力

要素は左に30px、上に20pxだけ移動します。

3. absolute（絶対配置）

absoluteは、要素を通常の文書フローから取り除きます。このため、他の要素はその要素が存在しないかのように配置されます。要素の配置は、最も近いpositionがstatic以外の親要素を基準にします。

例

HTML

<div class="container">
  <div class="box" id="absolute-box">Absolute</div>
</div>

CSS

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: lightgray;
}

#absolute-box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: coral;
}

4. fixed（固定配置）

fixedは、ビューポート（画面）を基準に要素を配置します。スクロールしてもその位置は変わりません。

例

HTML

<div class="box" id="fixed-box">Fixed</div>

CSS

#fixed-box {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: violet;
}

ポイント 固定配置は、ナビゲーションバーやヘッダーに使われることが多いです。

5. sticky（スティッキー配置）

stickyは、通常はrelativeのように動作しますが、スクロールして親要素の指定された位置に達すると、その位置で固定されます。

例

HTML

<div class="container">
  <div class="box" id="sticky-box">Sticky</div>
</div>

CSS

.container {
  height: 1000px;
  background: linear-gradient(to bottom, white, lightblue);
}

#sticky-box {
  position: sticky;
  top: 50px;
  width: 100%;
  height: 50px;
  background-color: orange;
}

注意点

1. z-indexとの組み合わせ:

   positionがstatic以外の要素は、新しいスタッキングコンテキストを生成します。

2. スクロール可能な親要素:

   stickyを使用する場合、親要素にoverflow: scroll;またはoverflow: auto;が必要です。

実践例

以下のコードは、複数のposition値を使って要素を配置する例です。

HTML

<div class="static">Static</div>
<div class="relative">Relative</div>
<div class="absolute-container">
  <div class="absolute">Absolute</div>
</div>
<div class="fixed">Fixed</div>
<div class="sticky-container">
  <div class="sticky">Sticky</div>
</div>

CSS

.static {
  position: static;
  background-color: lightgray;
}

.relative {
  position: relative;
  top: 10px;
  left: 10px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative;
  height: 200px;
  background-color: lightblue;
}

.absolute {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: coral;
}

.fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: violet;
}

.sticky-container {
  height: 1000px;
  background: linear-gradient(to bottom, white, lightblue);
}

.sticky {
  position: sticky;
  top: 10px;
  background-color: orange;
}

まとめ

positionプロパティは、CSSレイアウトの中核を担う重要なプロパティです。特に、relativeやabsolute、fixed、stickyは、それぞれ異なる用途で非常に有用です。実際のプロジェクトでこれらを組み合わせて、柔軟で効率的なレイアウトを構築しましょう。

関連仕様

• CSSWG: Choosing A Positioning Scheme: position property
• MDN: position