【HTML&CSS】positionプロパティの使い方をわかりやすく説明

この記事では、CSSにおけるpositionプロパティの使い方についてまとめました。

できるだけわかりやすく説明したつもりなので、よかったらご覧ください。

スポンサーリンク

要点

positionプロパティは指定した要素の配置場所を決める

指定できる値はstatic、relative、absolote、fixed
relativeは元の場所を基準として配置を設定できる
absoluteはページの左上を基準として配置を設定できる
absoluteの基準を変更する場合は、親要素にposition:relativeまたはfiexed;を指定する
fixedはスクロールしても動かなくなる

positionプロパティとは?

positionプロパティとは、CSSで使用される要素の配置を変更するためのプロパティです。

positionプロパティの基本構造

CSSの基本構造は以下の通りです。

そのためpositionプロパティの基本構造は
またpositionプロパティは配置場所を変更するための基準を設定するプロパティです。実際どの位置に移動するかは、top bottom left rightを使います。
そのため
が基本構造となります。

positionプロパティを使えるセレクタ

positionプロパティに指定できる値
static
relative
absolute
fixed

スポンサーリンク

おすすめ記事

フォローする