CSS学習中の方からの質問「position: relative; とposition: absolute; の違いが分かりません!」

地図で東京スカイツリーの位置を考えてみよう

absolute(アブソリュートと読みます)は、地図では緯度経度のようなものです。

例えば

「東京スカイツリーは東経139.7713562度、北緯35.6955548度の位置にあります。」

と言えば、スカイツリーがまったくどこにあるのか分からない方も、
日本の位置も知らない海外の方も、
地図上でスカイツリーの場所を見つけることができます。

一方、relative(リレイティブ、レラティブと読みます)は、地図ではどこかを基準点とした位置のようなものです。

例えば、
「たかし君の家は、郵便局から2軒先にある」
というのも分かりやすい例のひとつですが、

「東京スカイツリーは、東京駅から北東に5.1kmの距離にあります。」

という風に言うと、2地点の距離と、東西南北の関係が分かります。

さらに、
「東京スカイツリーは、東京駅から北東に5.1kmの距離にあり、成田空港から西の方向に53kmの距離にあります。」
となると東京スカイツリーは基準とする地点を変えることで、
5.1kmとも、53kmとも表記することができるようになります。

これがrelativeの便利な使い方です。

絶対位置のabsolute、相対位置のrelative

このように、absoluteは原点からの位置を表すので、「絶対位置」と、
relativeは2要素の位置関係を表すので、「相対位置」とも呼ばれます。

Web上の原点はどこ?

Webサイトの原点とは一体どこでしょうか?

ページをブラウザで開いたときの、左上が原点です。

Webサイトの原点

absoluteで四角形を描いてみよう

ではこのページで、300px x 200pxの長方形を、原点から右下に作成したいと思います。

Webでは右下が正の向きです。

position: absolute;   //原点からの絶対位置
left: 0px;   //始点(ここでは原点)から左に0px
top: 0px;   //始点(ここでは原点)から下に0px
background: #green;   //四角形の背景色
width: 300px;   //四角形の横幅
height: 200px;   //四角形の高さ

left, topとありますが、ここは場合に応じて、right(右から)やbottom(下から)としてもOKです。

absoluteの使いやすい点・そうでない点・特徴

position: absolute; は、スクリーンのサイズがいくつであっても、
常に最上部、常に左端に、など固定位置に要素を置きたい場合に便利です。

上の四角形の例の場合、スクリーンサイズが大きなユーザーの場合、
右下にもっと余白ができます。

また、常に原点を基点としているので、ページの真ん中あたりに任意のコンテンツを配置したい場合は、
topやleftの値が大きくなったり、またスクリーンサイズによっては
想定した場所に表示されないなどのケースもありえます。

ここまではposition: absolute;のお話でした。

relativeは親、absoluteは子として使う

次はrelativeとabsoluteの合体技についてお話します。

簡単に言えば、relativeを親要素とし、子要素としてabsoluteを入れ子にします。

まずはHTMLで2つのdivを作り、
子を入れ子にします。

次はCSSですが、親の要素に子要素をかぶせるようにしたいと思います。

.parent {
 position: relative;
 background: #green;
 width: 300px;
 height: 100px;
}

.child {
 position: absolute;
 background: orange;
 width: 50px;
 height:50px;
 top: 20px;
 left: 280px;
}

実際にブラウザで見るとこんな感じになると思います。

relativeとabsoluteは組み合わせで使うと便利

このように、親relativeに対し、子absoluteは親の原点からに対して、
任意の位置に配置することができます。

最初の例のように、absoluteだけのケースは、
 「親がいない=ブラウザが親」
と認識されるため、ブラウザの左上が原点となります。

親は何個あってもよいが・・・

親relativeは何個あっても大丈夫です。
今回はdivタグを使いましたが、pタグでもspanタグが親になってもOKです。
*ただしHTMLの入れ子のルールは守りましょう。

ただし、子の親は直前の要素となります。
分かりづらいのでコードで見てみましょう。

上記の例では、parent-1という親の中にparent-2が入れ子になり、
さらにchildが入れ子になっています。

ここでchildの親は・・・?
というと、parent-2となります。

よくある間違い

全然思ったように配置できないんだけど!!
という場合、こんなことはありませんか?

よくある間違い1
実は入れ子になっていなかった・・・(´・ω・`)

こんな場合はchildは親がブラウザになってしまいます。

よくある間違い2
親が2人いた・・・(´・ω・`)

さっきのパターンですね。

またいつか、これを使ったもう少し複雑な例も紹介したいと思います!