この記事では、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