位置何に使うの？
1.静的 (デフォルト)
- 要素はドキュメントの通常の流れに従って配置されます。
・初期値ですので要素の配置には影響しません。
- 静的に配置された要素は、親要素の位置プロパティの影響を受けません。
2.親戚
- 要素は通常の位置を基準にして配置されます。
- 要素の位置は、他の要素のレイアウトや位置に影響を与えることなく、指定されたオフセットだけシフトされます。
- オフセットは、top、right、bottom、および left プロパティを使用して指定します。
- 相対位置決めは、小さな再位置調整によく使用されます。
3.絶対的
- 要素は、その要素を含む要素内、または最も近い位置にある祖先内に絶対的に配置されます。
- 要素の位置は通常のドキュメント フローから完全に削除されます。
- 絶対配置は通常、ポップアップ、ツールチップ、オーバーレイ要素など、正確な配置と階層化が必要な要素に使用されます。
4.修正済み
- 要素はビューポートに対して配置および固定され、ユーザーがページをスクロールしてもその位置が維持されます。
- 固定位置は、ナビゲーション バー、サイドバー、フローティング広告など、ユーザーのスクロール位置に関係なく表示されアクセス可能な要素を作成する場合に便利です。
5.ベタベタ
- スティッキー ポジショニングは、相対ポジショニングと固定ポジショニングの側面を組み合わせたものです。
- 要素は、指定されたスクロール ポイントに到達するまで、相対的に配置された要素と同様に動作します。その時点で、それらは固定され、スクロール位置が変更されるまでビューポートにロックされたままになります。
- 固定配置は、ユーザーがページをスクロールしても表示されたままになるヘッダーまたはフッターに一般的に使用され、固定されたナビゲーション エクスペリエンスを作成します。
適切な配置方法の選択は、Web ページ内の要素の望ましい動作とレイアウトによって異なります。