CSSのpositionプロパティの使い方

デザインによって複雑なレイアウトを作るには、positionプロパティを使う必要あります。

positionプロパティには「absolute」「relative」「fixed」「static」があり、static以外のpositionプロパティを使用する場合は、top, bottom, left, rightのプロパティを必要に応じて併用します。そうすることで、ボックスの配置方法、上下左右の距離を指定します。

今回は1つ1つの違いをご説明します。

static

staticはデフォルト値になります。配置方法を指定せず、(top, bottom, left, right)が適用されなくなり、配置は初期値、通常の位置になります。

absolute

absoluteは絶対位置の配置になります。親要素やウィンドウを基準に位置を指定します

relative

relativeは相対位置の配置になります。absoluteを指定したボックスがある場合は、absoluteを指定したボックスを基準として位置を指定します。

absoluteを指定したボックスがない場合の位置の指定は、元々の配置が基準になります。つまり、relativeを使用すると、元々の位置またはabsoluteを指定したボックスから、指定された距離の場所に配置することができるということです。

fixed

これは、absoluteと同じく絶対位置の配置になりますが、大きく違う点があり、fixedの場合はスクロールしても位置が変わりません。
また、基準はウィンドウになり、位置は固定されます。


イベント

購読

平日・毎朝更新中