HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


ボックスの配置と基準

CSSの書き方

position:値 ;

CSSの詳細情報
プロパティ名 position 読み方 ポジション
初期値 static 意味 ボックスの配置調整
static/relative/absolute/fixed
対象 すべての要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 しない IE 5.0以上(※)/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「position」プロパティは、上下左右の座標と基準点を定めることにより、ボックスを任意の位置に配置するためのスタイルシートです。

この座標と基準点のうち、「position」プロパティは基準点を定めるためのプロパティです。通常は、単体で指定することはなく、以下の座標点を定めるプロパティと併用します。

static(静止)

「position:static;」は「position」プロパティの初期値です。標準の配置となり、ボックスが表示される位置は、隣接するボックスとの関係で決まります。

relative(相関)

「position:relative;」とすると、ボックスは本来表示されるべき位置(static)を基準とした相対的な位置に表示します。従って、上下左右の座標はこの基準点からの距離になります。

absolute(絶対)

「position:absolute;」とすると、ボックスは2つの条件により動作します。1つめの条件は「position」プロパティを指定した要素を含む親要素にも「position」プロパティが指定され、かつその値に「relative/absolute/fixed」のいずれかの値が指定されていた場合です。このときは、その親要素の左上が基準となります。

一方、2つ目の条件は「position:static」以外の値が親要素に定められてない場合です。このときは、ブラウザの表示画面の左上が基準となります。

absoluteは絶対的な配置なので、他のボックスの影響を受けません。

fixed(固定)

「position:fixed;」とすると、ボックスは固定されます。このときの基準点は、他のボックスの影響を受けることなく、ブラウザの表示画面の左上が基準となります。ただし、Windows版のInternetExplorerでは、「position:fixed;」という値は対応していません。

CSS/HTMLサンプル

div { position:relative; top:15px; left:10px; }
p { width:500px; }
p.rel { position:relative; top:70px; left:30px; background:#ffdff9;}
p.abs1 { position:absolute; top:15px; left:60px; background:#f6f6f6;}
p.abs2 { position:absolute; top:20px; left:360px; background:#accbfd;}
p.fix { position:fixed; right:0px; bottom:0px; background:#fea381;}

クラスを指定した各段落要素の配置を指定 サンプル