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
を指定していないため、top
やleft
は効きません。
ピンクのボックスは親要素の中で通常フローに従って配置されます。
position: relative; を追加してみると
See the Pen Untitled by suguru (@suguru22) on CodePen.
すると、ピンクのボックスは自分の元の位置を基準に50pxずつ移動します。
これが、static
とrelative
の明確な違いです。
よくある勘違いと注意点
① 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を理解したうえで、relative
・absolute
・fixed
・sticky
を組み合わせることで、
より柔軟で美しいデザインを実現できます。