Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

Positionの絶対位置と相対位置を解説する【HTML/CSS】

f:id:sgwshu:20171006050846j:plain

こんにちは。今回はあまり深く考えたことがなかったCSSのpositionについてわかりやすく解説できたらと思います。

 

 

absoluteとrelativeについて

absolute:相対位置

relative:絶対位置

これネットでよく見るんですが日本語ですらあまり意味がわかりません。

完結に説明すると

absolute

root(html)要素にしたがって動くがもし親要素がstatic以外の場合親要素の左端が基準となる(大抵relative)。

relative

他の要素の影響を受けて確率した場所を基準に指定。ときどきabsoluteの基準要素になるためにrelative指定されてる要素がある。 

初心者の時はabsoluteをかけたのに変化がない!?とか思ってしまう時があるかもしれないですが(自分だけ?笑)基本的にtopやleftをつけないと元ある場所に止まります。

画像で説明

f:id:sgwshu:20171006045018p:plain

これがベースです。AとBのdiv要素2つがroot要素(html)ある状態です。

f:id:sgwshu:20171006045021p:plain

画像内にも書いてますがdiv2にabsoluteが付くと現状では無条件で画面左上に行きます。(ちなみにpositonとtop:0の表記が必要)

f:id:sgwshu:20171006045027p:plain

Aの前になにかしらの要素が入ってもBは左上を守り続けます。

f:id:sgwshu:20171006045631p:plain

さらにBをA要素に入れたとしてもこの形は変わりません。

f:id:sgwshu:20171006045032p:plain

ここでA要素にrelativeをつけるとこうなります。これはBのabsoluteの第二用途positionがついてる親要素を基準に動きます。この時点でroot要素はもうBの基準要素では無くなります。

これがabsoluteの使い方2通りです。

f:id:sgwshu:20171006045036p:plain

A要素の中にB要素そしてA要素の前にC要素があります。

ここでrelativeをBにつけるとBがもともとあった位置から基準になるので

f:id:sgwshu:20171006050048p:plain

left:10pxをつけると右に10動くだけです。

 

まとめ

用途としては

absolute

  • html要素(画面の左上)を基準にして動かす
  • position要素を持つ親要素を基準にして動かす

relative

  • 通常位置を基準から動かす
  • absoluteの親要素代わりを務める

ってことを覚えていればrelativeとabsoluteの関係は完璧です。多分w

 

ではではSeeyaaaaa!!!!