ボックスの配置方法 : css

Tweet

Pocket

CSSは要素の配置方法を指定するためにpositionプロパティーが用意されています。

positionプロパティー

static(初期値),relative,absolute,fixed

static

要素を通常どおりに配置します。

relative

要素を通常の配置位置から、left,top,right,bottomの各プロパティーで指定した分だけずらして配置します。

relativeを指定したセレクタで位置プロパティー(left,top,right,bottom)が指定されていない場合は、staticと同じ配置になります。

relativeを指定した要素は，周りの要素の配置には影響しないため、ずらした位置に別の要素があれば，要素は重なって配置されます。

absolute

包含ブロックの左上を基準にleft,top,right,bottomの各プロパティーで指定した位置に絶対配置します。

この場合の包含ブロックとは、positionプロパティーにstatic以外が設定されている祖先で一番近いブロックです。

親要素のボックスにwidth,heightの指定がある場合には、親要素から生成される包含ブロックは自動で伸縮しません。包含ブロックよりabsoluteを指定した要素が大きければ包含ブロックをはみだします。

fixed

absoluteと同様に要素を配置するが配置の基準点が閲覧領域(ブラウザー画面の枠内)となります。ページスクロールをしても固定されます。