「CSS」では、「position」プロパティを使用することで、HTML要素の位置を指定することができます。「position」プロパティは、要素を配置する方法を指定するためのプロパティです。
「position」プロパティには、「static」「relative」「absolute」「fixed」の4つの値があります。
- static: これはデフォルトの値で、要素は通常のドキュメントの流れに従って配置されます。
- relative: 要素は通常の配置から相対的に移動します。 top、bottom、left、rightプロパティを使用して移動量を指定します。
- absolute: 要素は親要素からの相対的な位置で配置されます。 親要素にposition: relative;が指定されていない場合は、body要素がベースになります。 top、bottom、left、rightプロパティを使用して位置を指定します。
- fixed: 要素はブラウザウィンドウからの絶対的な位置で配置されます。 スクロールに関係なく、画面上で固定されます。 top、bottom、left、rightプロパティを使用して位置を指定します。
- sticky: 要素はスクロールすると画面上部に固定され、スクロールを戻したときにも再び表示されます。 top、bottom、left、rightプロパティを使用して、sticky要素がスクロールしたときに、画面上部、下部、左部、右部に固定する場所を指定します。
デフォルト値は「static」です。「static」を使用した場合は、要素はドキュメントの流れに従って配置され、「relative」「absolute」「fixed」を使用した場合は、要素の位置を絶対位置にします。
例えば、以下のように「position」プロパティに「absolute」を指定し、「top」「left」の値を指定することで、要素を画面からの絶対位置で配置することができます。
div {
position: absolute;
top: 20px;
left: 30px;
}「position:absolute」を指定した要素は、その直接の親要素を基準に位置を決められます。そして、「top」「left」「right」「bottom」の値を指定することで、その直接の親要素からの相対位置を設定することができます。
「position」プロパティは、配置の方法や位置を絶対値にすることができるため、レイアウト制御や動的なアニメーションなどに使用することができます。