Static positioning
position: static はすべての要素のデフォルトの配置方法であり、要素をドキュメントの通常フローに従って配置します。明示的に指定することで、JavaScript や他のスタイルで変更された位置指定をリセットできます。通常フローを維持したい場合に使用します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.position.static | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.element {
position: static;
/* top, right, bottom, and left are ignored */
}ライブデモ
実務での使いどころ
-
配置のリセット
JavaScriptやメディアクエリで変更された位置指定を通常フローに戻す場合に使用します。
注意点
- position: static の要素には top, right, bottom, left, z-index プロパティは効果がありません。
アクセシビリティ
- 通常フローに従うため、視覚的な順序とDOM順序が一致し、スクリーンリーダーの読み上げ順序に影響を与えません。