【CSS】position ボックスの配置方法を指定する

スポンサーリンク

ボックスの配置方法を指定するには position プロパティを使用します。 指定できる値には、static(通常)、relative(相対)、absolute(絶対)、fixed(固定)があります。

使用例


position: static;
position: relative;
position: absolute;
position: fixed;

説明
static 通常通りの配置。 static を指定した場合は top、bottom、left、right プロパティは適用されません。
relative 相対的な配置。通常通りに配置された場合の位置から、指定した値の分を移動します。 このあとに続くボックスは、このボックスが通常通りに配置されたものとして配置されます。
absolute 絶対的な配置。このボックスの包含ブロックを基準として、指定した値の分を移動します。 absolute を指定した場合は独立した配置となり、他の要素の配置には影響しません。
fixed 固定配置。ウィンドウの表示領域を基準とし、指定した値の分を移動します。 固定ですからスクロールしても移動しません。 独立した配置となり、他の要素の配置には影響しません。

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト