XHTML/CSS・トップ | CSSプロパティ・目次

●絶対配置・相対配置・固定配置

 positionは要素の配置を指定するプロパティです。指定できる値は static・absolute・relative・fixedです。また、基本的にCSSで指定された内容を除く、すべての要素に適用できますが、指定する値によってはバグに注意する必要があります。下の表の static〜fixedの値は下へいくほどバグが多くなります。

配置の種類 必要な上下左右のプロパティを選択して追加 下の値ほどバグが多い↓
static 普通配置 top/bottom/left/rightプロパティは指定できず OK
absolute 絶対配置 top/bottom/left/right(指定できる値を付加) 特定の過去のブラウザ
relative 相対配置 top/bottom/left/right(指定できる値を付加) 過去のブラウザ
fixed 固定配置 top/bottom/left/right(指定できる値を付加) Win IE不可

 普通配置とはごく一般的な配置のことです。要素名 { position: static; } と指定しますが、上下左右(left right top bottom)のプロパティは追加できないというより、指定しても反映されません。絶対配置は通常、ページ全体の上下左右からの距離を基準とします。また、相対配置とはその要素が本来、あるべき位置からずらす方法です。固定配置の位置指定の基準はブラウザの表示領域です。すなわち、指定すると絶対配置かつ、スクロールしても移動しません。ここでは、絶対配置と相対配置の例を解説します。

【CSS】↓

.zettai {
  position: absolute;
  top: 100px;
  right: 50px;
}

【HTML】↓

<p><img class="zettai" src="u016cut.gif" width="63" height="63" border="0"></p>

【解説】↑↓

 右上に"u016cut.gif"の画像をページ上から100pxと右から50pxの位置に絶対配置しています。適用したい要素に指定しますが、absoluteの値はほかの要素の影響を受けない特徴があります。例えば、ほかのテキスト領域にこの値で画像を固定配置するとテキストは画像の下に潜り込んでしまいます。position: absoluteの指定をした場合は、ブラウザ画面を狭めたり、ブラウザのフォントを大きくしたりして、周りのテキストや要素との位置を確認する必要があります。テキストを回り込ませたい場合として、floatプロパティを使う方法があります。


■相対配置のサンプル↓

相対配置とはもともとの位置からずらす指定です。

相対配置とはもともとの位置からずらす指定です。


【CSS】↓

.soutai {
  position: relative;
  top: 70px;
  left: 120px;
}

【HTML】↓

<p><img class="soutai" src="arw012.gif" width="72" height="102" border="0"></p>
<h2>相対配置とはもともとの位置からずらす指定です。</h2>

【解説】↑↓

 上のほうの矢印の画像にはなにも指定していませんが、下の矢印の画像には相対配置の指定をしています。相対配置とは本来あるべき位置から任意の方向に移動させることです。下の矢印の画像にはもともとの位置から上70pxと左120pxの距離を指定しています。つまり、もともとあった場所から下へ 70px、右へ 120px移動させています。

【ワンポイント】↓

 上下左右(left right top bottom)のプロパティを単独で使い、要素に指定して配置することもできますが、オペラ6以降などのバグがあります。バグについては、positionプロパティの値は staticを例外とすると absoluteを使った指定と上下左右のプロパティとの組み合わせがもっとも少ないことになります。relativeの値も Win IEはOKなので、そのほかの過去のブラウザのバグさえ、気にしなければ使えると思います。

※上下左右プロパティで使う値について

 上下左右(left right top bottom)プロパティで使える値は「実数+単位」「実数+%」ですが、状況に応じて自動的に設定される「auto」の値も使えます。

XHTML/CSS・目次 | 配置と表示・目次

Copyright (C) 2005-2007 http://www.xml.vc/