positionレイアウト
CSSのpositionによってレイアウトを行う方法。
positionは
absoluteを指定することでウインドウの左上又はrelativeがしていされた親要素からの絶対位置に表示され、
その要素分の領域は確保されない。
positionでレイアウトを行う場合、
位置とサイズの指定を間違えると別の要素と重なって表示されたりする場合があるので注意。
よくある、上中下段に縦方向3分割し中段を左右に2分割する方法の例
<div style="border:black solid 1px;">ヘッダ</div>
<div style="position:relative;height:200px">
<div style="border:black solid 1px;position:absolute;width:100px;height:200px">サイドバー</div>
<div style="border:black solid 1px;position:absolute;margin-left:100px;height:200px">ページ内容</div>
</div>
<div style="border:black solid 1px;">フッタ</div>
ヘッダ
サイドバー
ページ内容
フッタ
ヘッダ部分の次にposition:relativeが指定されていて、サイドバー、ページ内容はposition:absoluteが指定されている。
よって、サイドバーはrelativeの位置に表示され、
サイドバー分の領域は確保されないため次の要素であるページ内容も同じ位置に表示される。
ページ内容にはmargin-leftが100pxで指定されており、サイドバーの横幅が100pxなので重ならない。
例の場合はページ内容にはwidthを指定していないので横方向のサイズは必要分しか確保されない。
この際気をつけなくてはいけないのが、フッタの表示位置である。
position:absoluteの要素分は領域が確保されないため、他の要素によって縦方向のサイズを確保しなくてはいけない。
そうしなければフッタ部分はサイドバーの位置に表示されてしまう。
例の場合は親要素の<div>で縦方向のサイズ200px確保してある。
確保サイズが足りない場合は今度はサイドバー又はページ内容の下の方がフッタ部分を突き抜けてしまう。