（9）フッターがページ上部に配置されてしまった！

■09
テクニック52

フッターがページ上部に配置されてしまった！

→ relativeで位置指定をするかfloatでレイアウトしよう

フッターなどが本来の位置より上に配置されてしまうのは、absolute（絶対配置）で位置指定している場合に起こりやすい。位置の微調整がしやすいpositionプロパティだが、absoluteに指定すると後続のブロックに影響を与えてしまう。

absoluteに指定されたブロックは、後続のブロックにとっては透明人間のような扱いになり、「何もない」のと同じに解釈されるため、本来の位置より上に配置されてしまうのだ。

これを回避するには、positionプロパティを使う際relative（相対配置）を指定する。relative指定されたブロックは、上下左右に移動しても、後続のブロックからは本来の位置にあると見なされるため、前の要素と重なることがない。

逆に、あまり大きく位置を動かすと無用な空白ができてしまう可能性があるので、その点では注意が必要だ。
文＝黒須信宏（（株）CrossDesign）


positionプロパティによる位置調整。本来の位置より右に100px移動した


absoluteブロックに後続ブロックが重なった例


absoluteをrelativeに変更した場合


relativeで位置調整をすると、後続のブロックからは元の位置にあると解釈され、無用な空間ができる場合がある





本記事は『web creators』2008 vol.74からの転載です
月刊『web creators』掲載記事号の情報はこちら！>>>