positionを使ったレイアウト

授業

position

floatを使わずに横並び配置ができる
*レイアウトに影響が出やすいため、1ページ内1箇所の使用にとどめておきたいところ

  • static：常態　上から下へ
  • relative：相対位置
  • absolute：絶対位置（全体の左上が基点）
  • fixed：絶対位置（スクロールしてもそのまま）

使いどころ…floatの制限から離したい時
　　　　　　headerの中のinfoリンクとか、ナビボタンの並びから一個だけ独立したボタン用とか

#container内でrelative指定
さらにその中でabsolute指定はok

演習

  • 基本型


  • header内ブロックを右へ配置


  • floatを使ったレイアウト

*条件コメント（Conditional Comments）を使う
IE6以下のバージョンに適用するCSSを読み込むもの

<!--[if lt IE 6]>
<link rel="stylesheet" href="css/ie6.css">
<![endif]-->