表示位置の調整（position）
今回は表示位置の調整方法です。 スタイルシートの中でも高度なプロパティに属し、使いこなすのはちょっと難しいです。
使うプロパティ＆値
positionプロパティの値は４つ。
position:absolute; 絶対配置 position:relative; 相対配置 position:static; 通常配置（指定しない場合はこれ） position:fixed; 固定配置（IE6不可）
top,bottomの値でずらし具合を決めます。
top:値;（px,%,emなど）上辺からどれぐらい下へずらすか bottom:下辺からどれぐらい上へずらすか left:左辺からどれぐらい右へずらすか right:右辺からどれぐらい左へずらすか
pxで指定することが多いですね。たまに％を使うこともあります。
絶対配置と相対配置について
positionプロパティの使いこなす上で理解しなければならない概念なのですが、なかなか難しいです。 なんとなく理解してもらえれば十分です。あとは使いながら感覚で覚えてください。
絶対配置とは
基準となるボックスを基点として表示位置を計算する配置方法
基準となるボックスは、「親であり、かつposition:relative;が指定されているボックス」。そのようなボックスが無い場合はbodyが基準になる。
下に続く要素はabsoluteを指定したボックスが存在しないものとして位置を計算する。つまり上へ詰めて表示される。
floatとの併用はできない。
図にするとこんな感じです。
相対配置とは
本来自分が配置される位置を基点として表示位置を計算する配置方法
本来配置される位置とは、position:staticを指定した場合表示される位置である
下に続く要素は「本来配置されていた場所」に続くように配置される。そのため本来の位置を考慮しながら使う必要がある。。
floatとの併用は可能。
図にするとこんな感じです。
以上が基本となる考え方です。
使いこなすための＋α
基本となる考え方は上の通りなのですが、これにマージンやパディング、floatなどのプロパティが加わったり、ブラウザーによるバグが作用するので、思い通りにいきません。
あまり無茶な使い方はしない方が良いでしょう。