CSSのpositionプロパティの使い方は何ですか?
CSSのpositionプロパティは、ドキュメント内の要素の配置方法を指定するために使用します。また、いくつかの値を保持できます。
- static: 基本設定。要素は通常の文書の流れに沿って配置され、top、bottom、left、right、z-indexプロパティの設定は無視します。
- 相対配置:要素が通常の位置に配置されるのに対し、top、bottom、left、right の属性を使用して、要素を自身の位置から相対的にオフセットして配置します。
- 固定配置:要素はブラウザウィンドウに対して固定の位置で、ページスクロールに影響されません。要素のブラウザウィンドウからのオフセットは、top、bottom、left、right属性で指定できます。
- 絶対配置とは、最近の配置済み祖先要素に相対して要素を配置する方法です。配置済みの祖先要素がない場合は、最初のブロック(通常はボディなどの文書の最外層コンテナー)に相対して配置されます。top、bottom、left、right の各属性を使用して、配置済みの祖先要素またはブロックからのオフセットを指定できます。
- スティッキーは、特定のしきい値を超えるまでは相対位置になり、その後固定位置になる粘着性のある配置です。top、bottom、left、right属性を使用して、要素を通常の位置からのオフセット量を指定できます。
これらのposition属性の値は、通常、z-index属性と組み合わせて、エレメントの前後の重ね合わせ順序を制御するために使用されます。