ボックスの配置方法 : css


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

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。