CSS07（positionを使ったレイアウト）

positionが使われる場面

• 自由に位置指定できるので、ワンポイント的に使う。
• 実際のサイトでは、重要な項目に対して要チェックマークを重ねて使うなど。
• 紙媒体的な使い方。

CSSの記述

• リセットのために記述するtext-algn:center;は、IE6対策。IE6では、#containerのmargin: 0 autoのautoが対応していない。
• htmlでdiv align="center"を設定しているケースがあるが、CSSで書くべき内容なので禁止。
• 記述するときは、まず要素を書き出して後から中身を設定する。

指定のしかた

• positionを指定する要素
  • position: absolute;
  • left: ○○px;
  • top: ○○px;
  • （rightは右端に寄せる場合に使う。px指定もできるが、使わないほうがよい。）
• position移動の基準になる要素
  • position:relative;
  • （指定がない場合はブラウザの0座標が基準になる。）
• #wrapperを基準にして#contentと#sidebarをpositionにする場合は、#wrapperの領域をoverflow:hidden;で固定できなくなるので、heightの設定が必要になる。
• この場合、#contentの中身がheight以上に増えたときに表示されなくなる。→positionはレイアウトには不向き。
• 要素の重なり順は、z-index:値;を指定する。数が多いほうが上に表示される。Web業界の慣例では100きざみで指定し、1000が最上位とする。