0

positionプロパティの「absolute」と「relative」の違いって?

positionプロパティの「absolute」と「relative」の違いって?

横並びの要素=floatプロパティと考えがちですが、positionプロパティの方が都合がいい場合があります。数あるCSSのプロパティの中で、イマイチ曖昧なpositionプロパティについて「absolute=絶対位置って?」「relative=相対位置って?」なんとなくわかるけど結局どう使い分けるの?という部分を解明していきたいと思います。

 

 

positionプロパティとは?

要素を配置する方法を指定します。値は以下の4つ。

static 配置指定なし。通常の位置に自動的に配置。←デフォルト
relative 相対位置。本来その要素が配置される場所を基準として配置位置が決まる。
absolute 絶対位置。ウィンドウまたは親要素を基準として配置位置が決まる。
fixed 絶対位置。スクロールしても位置の変わらない固定配置。

実際の配置位置は、上下左右からの距離(「top,bottom,left,right」プロパティ)を併せて指定します。これらはpositionプロパティの値が「static以外」の時に有効になります。逆を言えば、「static以外の何かしらの値を指定しないと有効にならない」ということになります。

ここまでの内容は、誰でも一度は目を通して理解はしていることだろうと思いますが、ここから実際にビジュアルと併せて確認していきましょう。

 

「relative」と「absolute」の違い

relative

▼top:0;の場合

W:200px H:100pxのロゴエリアの下に、relative指定をした<div>要素を配置してみます。

HTMLを記述

 CSSを記述

DEMO:1-1

 

relative-top

relativeは「本来その要素が配置される場所を基準として配置位置が決まる。」となっていましたので、その基準点から指定した場所に配置されるようになります。上のサンプルで言えば、.logoの下に本来配置されるので矢印の部分が基準点となり、そこから「top:0=上から0px」の位置に配置される結果になります。

 

▼top:100px left:200;の場合

先程の基準点から、top:100px left:200px(上から100px,左から200pxの位置)に「relative-box」を配置します。

CSSを記述

DEMO:1-2

 

relative-top-left

矢印の箇所を基準点として、指定された(上から100px,左から200px)位置に「relative-box」が配置されているかと思います。

 

▼top:-50px left:100;の場合

次にマイナス地(負の値)を指定してみましょう。先程の基準点から、top:-50px left:100px(上から-50px,左から100pxの位置)に「relative-box」を配置します。

CSSを記述

DEMO:1-3

 

relative-top-left2

矢印の箇所を基準点として、指定された(上から-50px,左から100px)位置に「relative-box」が配置されているかと思います。このようにマイナス(負の値)を指定することで、Y軸方向の負=画面上にずれていくことがわかります。

 

▼【※注意】2つ以上の要素が存在する場合

相対配置する要素が2つ以上存在する場合、厄介な問題があります。

HTMLを記述

 「relative-box」については先程と同じ指定、top:-50px left:100px(上から-50px,左から100pxの位置)に「relative-box」を配置します。その後ろに配置する「relative-after」、top:0 left:0;を指定します。

CSSを記述

DEMO:1-4

 

relative-top-left3

すると、本来あるべき場所にない「relative-box」のwidth:300px height;50px分の空白要素エリアが残されてしまいます。

 

absolute

▼top:0;の場合

W:200px H:100pxのロゴエリアの下に、absolute指定をした<div>要素を配置してみます。

HTMLを記述

 CSSを記述

DEMO:2-1

 

absolute-top

absoluteは「ウィンドウまたは親要素を基準として配置位置が決まる」とありましたので、サンプルの場合ウィンドウの左上を基準点として、そこから指定した場所に配置されるようになります。上のサンプルでいれば「top:0=上から0px」の位置に配置される結果となります。

 

▼top:100px left:200;の場合

先程の基準点から、top:100px left:200px(上から100px,左から200pxの位置)に「relative-box」を配置します。

CSSを記述

DEMO:2-2

 

absolute-top-left

矢印の箇所を基準点として、指定された(上から100px,左から200px)位置に「absolute-box」が配置されているかと思います。

 

▼【※注意】absoluteとrelativeを並列させる場合

上に記述する要素に対して絶対配置(absolute)、下に記述する要素に対して相対配置(relative)をすると、先程の両方とも相対配置にした場合と違う結果が得られます。

HTMLを記述

 「absolute-box」については絶対配置で、top:-50px left:100px(上から-50px,左から100pxの位置)にを配置します。その後ろに配置する「absolute-after」には相対配置で、top:0 left:0;を指定します。

CSSを記述

DEMO:2-3

 

absolute-top-left2

すると、余計なスペースは残さずに.logoの要素の下にピッタリと配置されました。

 

このように、positionプロパティの値である「absolute」「relative」の違いがあり、その親要素に何を指定しているか?によって結果が変わってくる為にややこしくなってしまっています。positionプロパティを扱う際は、基準となる要素は何か?どこからの距離を指定すれば良いのか?などを考えながら指定してく必要がありますね。

以上になります。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > positionプロパティの「absolute」と「relative」の違いって?