CSSにできること―ポジションレイアウト編

CSSにできること第八弾。
今回は、画面に対し、相対的、絶対的にコンテンツを配置していく、ポジションレイアウト（positionプロパティを使うので勝手に名付けました。正式名称ではありません）について書いていきます。
前作：CSSにできること―フロートレイアウト編

前回のフロートレイアウトは、右に回りこみ、左に回りこみ、という方向性の指定ですが、
positionプロパティを使うと、画面に対して固定の配置ができるようになります。

こちらの配置に関しても、floatと同様、widthとheightを指定する必要があります。
さらに、positionプロパティを指定したボックスには、「重なり」という概念が出てきます。
z-indexというプロパティによって、そのコンテンツが前景になるのか、背景になるのかを指定する必要があります。

１．相対配置

positionに対してrelativeという値を指定します。
画面に対し、相対的に配置する方法です。

この後で述べる絶対配置、固定配置をする際に、配置の基準となるボックスが必要になります。そこで、relativeという値を指定することによって、基準であるということを示すことができます。
（これ以外で私はrelativeを使ったことがありません・・・）

２．絶対配置

positionに対してabsoluteという値を指定します。
画面に対し、絶対的に配置する方法です。

上から何px、右から何px、という風に指定します。
この、上から、右から、という基準は、absoluteが指定されている部分を囲んでいるボックス、またはposition: relative;が指定されているボックスを指します。
top: 10px; left: 20px;だと、上から10px、右から20pxの部分に配置をする、という指定になります。
topとbottomからひとつ、leftとrightからひとつ選んで指定します。

３．固定配置

positionに対してfixedという値を指定します。
画面に対し、固定配置する方法です。

場所の指定方法は絶対配置と同じですが、fixedでは、画面に対して固定されます。
スクロールしても位置がかわらないので、サイドのメニュー部分の表示に使われることが多いです。
ただし、IE6以下には対応していませんので、現時点ではあまり実用的ではありません。

positionプロパティを使う際に共通に言えることですが、
positionにabsolute、fixedを使用したボックスは、他の要素とは別の次元といいますか、別のレイヤーに配置されます。（この、レイヤーというのがz-indexで指定する値です。）

高さを指定していない通常のボックスでは、文章量が多くなった場合、自動的にボックスが長くなり、その下のボックスも自動的に下に下がります。
しかし、absolute、fixedを使用したボックスは、文章量が多くなった場合、その下のボックスの上に重なるようにして表示されます。

文章ではすごく説明しづらいのですが、言いたいことは、
ボックスの中身が固定でない場合には、ポジションレイアウトをしないほうがいいということです。