CSSでレイアウトを調整する際に欠かせない「positionプロパティ」。その中でも最も基本的な値であるstaticは、意識されることが少ない存在かもしれません。ですが、実はこのposition: staticこそがレイアウトの「標準状態」を決定づける重要な役割を担っています。この記事では、staticの意味や特徴、他のpositionプロパティとの違い、そして注意点について、初心者にもわかりやすく解説していきます。
position: staticとは？
position: staticは、CSSのpositionプロパティの初期値です。つまり、明示的に設定しなくても、すべてのHTML要素はデフォルトでこの状態にあります。
.example {
position: static;
}
この設定では、要素は通常の文書の流れ（フロー）に従って配置されます。つまり、前にある要素の下に配置され、次に来る要素はその下に続く、といったような自然な流れです。
ポイントとして覚えておきたいのは、staticに設定された要素は、top, bottom, left, rightといった位置指定プロパティを無視するということです。
staticはなぜ重要なのか？
「何も設定していない状態＝static」だからこそ、最も基本的でありながら、他のpositionプロパティ（relative, absolute, fixed, sticky）との比較の基準になります。
たとえば、ある要素にposition: absoluteを設定した場合、通常は一番近い「positionがstatic以外」に設定された親要素を基準に位置が決まります。つまり、基準になる親要素がstaticである場合、絶対配置は<body>を基準に配置されます。
このように、staticがどう働くかを理解していないと、他のpositionがどう作用するかも理解しづらくなります。
他のposition値との違い
ここでは、staticと他の主要なposition値との違いを簡単に比較します。
relativeとの違い
relative: 通常の位置から相対的に移動。文書の流れに影響はない。static: 移動しない。文書の流れに完全に従う。
absoluteとの違い
absolute: 文書の流れから取り除かれ、親要素を基準に自由に配置される。static: 親要素の影響を受けず、自然な流れで配置。
fixedとの違い
fixed: ビューポートを基準に固定される（スクロールしても動かない）。static: スクロールに応じて他の要素と一緒に動く。
stickyとの違い
sticky: 特定の位置までは通常通りスクロールに従い、それ以降は固定される。static: そういった特殊な挙動は一切ない。
static指定時の注意点
position: staticには以下のような制約があります。
1. top・leftなどの位置指定が無効
.example {
position: static;
top: 20px; /* 無視される */
}
上記のように位置指定をしても、staticの状態ではまったく影響がありません。動かしたい場合はrelativeやabsoluteに変更する必要があります。
2. z-indexの指定も効かない
z-indexは、スタッキング（重なり順）を制御するプロパティですが、これもstaticでは無効です。relativeやabsoluteでないと効果が出ません。
具体例で理解するstaticの動き
以下はstaticとrelativeの比較です。
<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
margin-bottom: 10px;
}
.static-box {
position: static;
top: 20px; /* 効かない */
}
.relative-box {
position: relative;
top: 20px; /* 効く */
}
</style>
<div class="box static-box">Static</div>
<div class="box relative-box">Relative</div>
この例では、static-boxはtop:20pxが効かず、relative-boxだけが下にずれて表示されます。
position: staticが使われる場面とは？
実は明示的にposition: staticを使う場面は少ないです。なぜなら、CSSでは何もしなければすでにstaticだからです。
ですが、以下のような場合に意図的に使うことがあります。
1. レイアウト調整後に元に戻したいとき
ある要素にabsoluteを設定した後、元に戻すにはstaticを明示的に設定します。
.box {
position: static; /* 意図的に戻す */
}
2. JavaScriptで動的に変更するとき
JavaScriptで動的にスタイルを変更する際に、明確にstaticを指定することがあります。
element.style.position = "static";
開発でstaticに気を付けるべきケース
- 子要素を
absoluteにしたいが、親がstaticのままだと意図通りにならない - スクロール固定したいのに
staticだと動いてしまう - JavaScriptやCSSライブラリが自動的に
positionを操作する場合、初期化としてstaticを使う必要がある
このように、意図しないレイアウト崩れの原因がstaticの理解不足ということは意外と多いです。
まとめ：staticを理解することがCSSレイアウトの第一歩
position: staticは目立たない存在かもしれませんが、CSSレイアウトの基本を支える非常に重要な概念です。他のpositionプロパティの動きを理解するための土台でもあります。
以下のポイントを押さえておきましょう。
staticはすべての要素の初期状態- topやleftなどの位置指定は無効
- 意図的にレイアウトを調整したい場合は、他のpositionに切り替える
- 他のpositionの動作を理解するには、まずstaticを理解することが必要
CSSのレイアウトがうまくいかないと感じたら、一度positionの指定を見直してみましょう。もしかしたら、そこにstaticの落とし穴があるかもしれません。