Contents
地図で東京スカイツリーの位置を考えてみよう
absolute（アブソリュートと読みます）は、地図では緯度経度のようなものです。
例えば
「東京スカイツリーは東経139.7713562度、北緯35.6955548度の位置にあります。」
と言えば、スカイツリーがまったくどこにあるのか分からない方も、
日本の位置も知らない海外の方も、
地図上でスカイツリーの場所を見つけることができます。
一方、relative（リレイティブ、レラティブと読みます）は、地図ではどこかを基準点とした位置のようなものです。
例えば、
「たかし君の家は、郵便局から２軒先にある」
というのも分かりやすい例のひとつですが、
「東京スカイツリーは、東京駅から北東に5.1kmの距離にあります。」
という風に言うと、２地点の距離と、東西南北の関係が分かります。
さらに、
「東京スカイツリーは、東京駅から北東に5.1kmの距離にあり、成田空港から西の方向に53kmの距離にあります。」
となると東京スカイツリーは基準とする地点を変えることで、
5.1kmとも、53kmとも表記することができるようになります。
これがrelativeの便利な使い方です。
絶対位置のabsolute、相対位置のrelative
このように、absoluteは原点からの位置を表すので、「絶対位置」と、
relativeは２要素の位置関係を表すので、「相対位置」とも呼ばれます。
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で２つの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となります。
よくある間違い
全然思ったように配置できないんだけど！！
という場合、こんなことはありませんか？
よくある間違い１
実は入れ子になっていなかった・・・(´・ω・｀)
こんな場合はchildは親がブラウザになってしまいます。
よくある間違い2
親が２人いた・・・(´・ω・｀)
さっきのパターンですね。
またいつか、これを使ったもう少し複雑な例も紹介したいと思います！
