【CSS基礎】positionプロパティを指定しないとどうなる?静的配置(static)を理解しよう

Web制作をしていると、position: absolute;position: fixed; を指定することはよくありますが、「positionを指定しないとき」の状態をきちんと理解している人は意外と少ないかもしれません。

この記事では、positionプロパティを指定しない=static(静的配置)になるという基本から、
他のposition値との違い、よくある誤解、実際のコード例まで詳しく解説します。

positionプロパティとは?

position プロパティは、要素の配置方法(レイアウト上の位置指定ルール)を決めるCSSの基本プロパティです。
代表的な指定方法は次の5つです:

意味
static通常の文書の流れに従う(デフォルト)
relative自分の元の位置を基準に移動
absolute親または祖先のposition指定要素を基準に配置
fixedビューポート(画面)を基準に固定配置
stickyスクロールに応じて固定/通常位置を切り替え

この中で、特に理解しておきたいのがstatic(スタティック)
なぜなら、これが「positionを指定しないときの状態」だからです。

positionを指定しないと「static」になる

実は、CSSでpositionを何も指定しなかった場合、
ブラウザは自動的に position: static; を適用します。

/* どちらも同じ意味 */
div {
  /* position: static; と同じ */
}
div {
  position: static;
}

つまり、「positionを指定しない」=「staticを指定したのと同じ」です。

static(静的配置)の特徴

position: static; の特徴は以下の通りです:

  • 要素は通常の文書の流れに従って配置される
  • top, right, bottom, left無効(効かない)
  • z-index無効
  • 要素同士が自然に上下に並ぶ(HTMLの順番通り)

つまり、「特別な位置指定をしない自然な状態」がstaticです。

例:positionを指定しない場合

See the Pen Untitled by suguru (@suguru22) on CodePen.

結果:
3つのボックスが上から順に縦に並びます。
これは、HTML文書の流れ(=通常フロー)に従って配置されているためです。

他のpositionとの比較

では、positionを指定した場合にどう変わるのか比較してみましょう。

配置の基準top / left などが効くz-indexが有効
static通常の流れ××
relative自分自身
absolute親要素(position指定あり)
fixedビューポート
stickyスクロール位置

例:positionを指定しない場合(static)

See the Pen Untitled by suguru (@suguru22) on CodePen.

この場合、positionを指定していないため、topleftは効きません。
ピンクのボックスは親要素の中で通常フローに従って配置されます。

position: relative; を追加してみると

See the Pen Untitled by suguru (@suguru22) on CodePen.

すると、ピンクのボックスは自分の元の位置を基準に50pxずつ移動します。
これが、staticrelativeの明確な違いです。

よくある勘違いと注意点

① z-indexが効かない

positionを指定していない(=static)の要素には、z-indexを指定しても反映されません。
重なり順を操作したい場合は、position: relative; などを併用しましょう。

/* 効かない例 */
.box {
  z-index: 10;
}
/* 有効にする例 */
.box {
  position: relative;
  z-index: 10;
}

② top / left などの指定は無効

position: static; の場合、次のプロパティはすべて無効です:

.box {
  top: 10px;
  left: 20px;
  bottom: 0;
  right: 0;
}

移動させたい場合は、必ず position: relative;absolute などを指定します。

まとめ:position指定なし=static

状態意味
positionを指定しないstatic(静的配置)として扱われる
文書の流れに沿って配置yes
top / left / z-index が効くno

positionを指定しない状態とは、ブラウザが自動で静的配置を行っている状態です。
レイアウト崩れの原因を探るとき、「もしかしてpositionが指定されていないかも?」と気づけると一段レベルアップです!

おまけ:positionを意識するとCSSが上達する

positionの理解は、Webレイアウトの「土台」といえるほど重要です。
staticを理解したうえで、relativeabsolutefixedstickyを組み合わせることで、
より柔軟で美しいデザインを実現できます。

タイトルとURLをコピーしました