position は要素がどのように配置されるか、およびオフセットプロパティ (top/right/bottom/left) が適用されるかどうかを制御します。
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute は要素を最も近いポジショニングされた祖先要素 (static 以外のもの) を基準に配置します。親要素に position: relative を設定して、それを参照点にします:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
この relative-parent / absolute-child パターンは至る所にあります: バッジ、ドロップダウン、ツールチップ、閉じるボタン。
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0) に到達するまで relative のように動作し、その後、コンテナが表示されている間はそこに留まります — セクションヘッダーに最適です。absolute/fixed 要素は通常フローから削除されるため、スペースを確保しません — 兄弟要素はそれらが存在しないかのように動作し、これが重なりを引き起こす可能性があります。それを計画してください (例: 固定ナビゲーションバーを補うためにパディングを追加)。
position はオーバーレイ、固定ヘッダー、モーダル、ドロップダウン、バッジに不可欠です。
relative-parent/absolute-child の関係と fixed-vs-sticky の区別は、常に使用する実践的なコアです。