Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Static positioning

position: static はすべての要素のデフォルトの配置方法であり、要素をドキュメントの通常フローに従って配置します。明示的に指定することで、JavaScript や他のスタイルで変更された位置指定をリセットできます。通常フローを維持したい場合に使用します。

配置通常フロー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
static
1
12
1
1
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.element {
  position: static;
  /* top, right, bottom, and left are ignored */
}

ライブデモ

position: static（デフォルト）

CSS の position: static（デフォルト） パターンです。

プレビュー全画面表示

top/left が無視される

CSS の top/left が無視される パターンです。

プレビュー全画面表示

relative との比較

CSS の relative との比較 パターンです。

プレビュー全画面表示

実務での使いどころ

  • 配置のリセット

    JavaScriptやメディアクエリで変更された位置指定を通常フローに戻す場合に使用します。

注意点

  • position: static の要素には top, right, bottom, left, z-index プロパティは効果がありません。

アクセシビリティ

  • 通常フローに従うため、視覚的な順序とDOM順序が一致し、スクリーンリーダーの読み上げ順序に影響を与えません。

参考リンク