2009年6月16日火曜日

絶対配置によるレイアウト、positionプロパティ

positionプロパティを使えば、XHTML文書の順序に関係なく、最下段の要素を最上段にもってくるといったように、どこにでも特定のdiv要素を配置できます。

div#notice {
position: absolute;
width: 90px;
height: 20px;
left: 770px;
top: 10px;
}

注意すべきは、絶対配置は他のボックスとは、いわば別のレイヤー(階層)に属し、後続のボックスには影響を与えないので、絶対配置のボックスのテキスト量が肥大化した場合、後続のボックスと重なってしまうことがあることです。
このような場合にはheightプロパティの値を変更するになります。

position プロパティの値は、abosolute(絶対配置)の他に、relative(相対配置)、fixed(固定配置)、static(通常配置)があります。
fixed(固定配置)はボックスに適用すると、ページをスクロールした場合でも移動することなくウィンドウに固定したままとなります。
ナビゲーションや画像を固定したい場合に有効です。static(通常配置)はデフォルト設定で元に戻したいときに指定します。