ブログのエントリーはここから
Feb
12
CSSネタ；position 要素のabsolute（絶対位置指定）とrelative（本来の位置からの相対位置指定）についてのテクニック～
Posted by R12:14 PM
久々のCSSネタです。
CSSでLayoutを実装すると必ず利用するのpositionやfloat。
慣れてくると実用的な「float」を使う機会が多いかと思いますが「position」も利用する機会もあるのでここにメモしときます。
「position」にはいくつか要素があるのですがその辺りはGoogleで調べて頂くとして（ごめんなさい）よく使われるであろう 「absolute」 と 「relative」 について触れていきます。こちらとか詳しいです。
「absolute」はブウザの左上を基点にBoxの位置を設定します。ちなみに左上は（top:0; left:0;)と記述します。
「absolute」を指定すると本来あるべき位置を無視しブラウザの左上から強制的に表示されます。
有りがちな間違いは入れ子になっている子要素を絶対値にした為に親要素が延びずに背景が表示されないとかだと思います。
次に「relative」ですがこちらは現在あるべき位置を基点に左上から位置を指定します。記述は先程とおなじく（top:0; left:0;)のようになります。
「relative」を理解した上で「absolute」の応用です。
「absolute」は先程の説明の通りブラザの左上を基点として位置を指定するのですが親要素の指定が「relative」になっていた場合はその親要素の左上を基点に配置するようになります。
よって「relative」で設定されているBOX内で自由に設定する事が出来ます。