ボックスの配置方法（１）

通常フロー

CSSにおいてボックス（要素は全てボックス）を配置する最も基本的な約束で、ブロックボックス整形文脈とインラインボックス整形文脈が存在している。

• ブロックボックス整形文脈
  ブロックボックスが包含ブロック内の左側上部から縦に下部へと並んでいく流れ。

• インラインボックス整形文脈
  インラインボックスが包含ブロック内の左から右へと横に並んでいき、包含ブロックの上部から下部へと積み重なっていく流れ。　　　　　

行ボックス

• インラインボックスとは別に１行ごとに行ボックスもつくられている。
• 包含ボックス幅いっぱいまで拡がる。

赤、青、黄色のボックスが各、行ボックス

float

フロートした要素のボックスは通常フローから外れ、できるだけ左または右に配置される。

• 浮き上がっている状態。
• 浮動化すると通常フローの影響を受けないので通常なら縦に並ぶボックスを横に配置できる。
• floatした子要素を持つ親要素は、高さがなくなる。
• 後継要素がある場合は 　clear:both　、ない場合は 　clearfix　 か overflow:hidden で float を解除する。
• floatしたボックスには幅指定しなければならない。

通常フローとの比較図

• 左図：通常フローはソースの記述順に上から順に縦にならぶ。

• 右図：float：leftにすると浮きあがり後に続くブロックは右側へと回りこむ。float：rightは反対に左側へと回りこむ。

positionプロパティ

positionプロパティはボックス配置の基準位置が相対位置か絶対位置かを指定する。基準から上下左右(top、bottom、left、right)の距離を指定。

• position：static
  初期値。通常フローで配置される位置。
• position：relative
  staticの位置（通常フローで配置される位置）を原点（x=0px、y=0px）として配置を（top、right、bottom、left）の値によって指定する。後続ボックスの配置に影響しない。本来あった領域は確保したまま。
• position：absolute
  通常フローは全く関係なくなるので後続のボックスに影響する。本来あった領域は無かった事になるので、領域は詰められる。また基準は包含ボックスがstaticならウィンドウ全体の左上、static以外なら包含ボックス左上になる。
• position：fixed
  基準は常にウィンドウ全体の左上になりコンテンツをスクロールしても、ウィンドウ内での位置は変わらない。

z-index

positionプロパティで要素を本来の位置からずらすと他要素と重なる場合がある。その際に重なる順番を指定するプロパティ。

• positionにstatic以外の値が指定され要素同士が重なった場合はソースコードの上から順に表示される。つまり後からの記述が上にくる。
• z-index：1000；が最高値で最も上位に表示される。