見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話
- 書いた人：
- yukappa!(INO)
：- position
- 345,011 views
positionプロパティ、難しいですよね･･･！はじめのうちは何度聞いても混乱してしまうこの二つ。 「absolute」と「relative」の違いについて、画像とあわせてまとめてみました。
私もちょっと長いこと、
- absolute＝絶対位置
- relative＝相対位置
といわれても全然ピンときてませんでした。「絶対？相対？どういう意味？」という感じだったのですが、
きっと、考えるより実際見てみたほうがわかりやすいと思います！
実際にページに配置して確認してみましょう。
01ページ内に配置してみる
<body>～</body>内のソース
<body>
<div id=”box”>配置するボックス</div>
<p>テキスト</p>
</body>
「absolute」
ページ左上から120px、左から120pxの場所に表示されます。
「relative」
ページ左上から120px、左から120pxの場所に表示されます。･･･が！！！テキストの場所が違います。 
テキストの上部に謎の隙間ができますね・・・
これは、relativeが元々表示されるはずだった高さが残るためです。
元々あるべき位置から見た目だけ右下にずれた。と考えたほうがわかりやすいかもしれません。
この表示のクセがわかれば簡単です！
次もきっとさくさくわかるハズ(*´o｀*)ﾉ
02ボックスが重なった場合
次に、ボックスが2つになった場合を見てみましょう
下の黄緑色のボックスは
position:relative;
top:100px;
left:100px;
で位置指定をしています
配置するボックスは
ページ上から120px、左から120pxの場所に表示されます。
<body>～</body>内のソースは
<body>
<div id=”box1″>下に敷いているボックス</div>
<div id=”box2″>配置するボックス</div>
</body>
としています。
それでは、二つの配置を確認してみましょう！
「absolute」
下のボックスなんて問答無用！で左上からの絶対位置に表示されます
「relative」
黄緑色のボックスは「relative」指定だったので実は元々あった場所に高さが残っていました。
ちょっとややこしいのですが、ピンクのボックスは元は「半透明になっている黄緑ボックス」の下に配置されるはずだったのですが、(さっきのピンクのボックスのテキスト位置を思い出してみてください(*´o｀*)！「relative」で位置を指定しているので「本来配置されるべき位置」からの座標位置に配置されています
03ボックスの中に配置した場合
次に、ボックス内に配置した場合の「absolute」「relative」の違いを確認してみましょう
外側の灰色のボックスは
先ほどと同じく、
position:relative;
top:100px;
left:100px;
で位置指定をしています
※padding指定は20pxにしています。(薄い灰色で塗りつぶした部分)
配置するボックスは
基準点より上から20px、左から20pxの場所に表示されます。
<body>～</body>内のソースは
<body>
<div id=”box1″><div id=”box2″>配置するボックス</div></div>
</body>
※box1＝外側の灰色ボックスです
「absolute」
親となるボックスの左上を基準点とし、
上から20px、左から20pxの場所に表示されます。
「relative」
元々配置されるべきだった「paddhingを含めた描画位置」を基準点とし、上から20px、左から20pxの場所に表示されます。
まとめ
青のボックス「absolute」は親ボックスの指定が何であっても、必ず左上を基準点とする(絶対位置)
→基準点から数値を指定して、表示したい場所に配置したいときに便利
ピンクのボックス「relative」は本来ピンクのボックスが表示される位置を基準として配置(相対位置)
→「元の位置から○ピクセルずらしたい」というときに使用すると便利
気をつける点：親ボックスの位置や設定を受ける場合があるので(特にrelative)忘れず注意すること
よく使われるパターンは親ボックスがrelative(またはabsolute)、その中にabsoluteです。
わかりづらいけれど使えるようになるととっても便利なpositionプロパティ、
どんどんチャレンジしてみましょう！