ボックスの配置と基準
CSSの書き方
position:値 ;
|
|||||||||||||||||||||||||||||||||||||||||
解説
「position」プロパティは、上下左右の座標と基準点を定めることにより、ボックスを任意の位置に配置するためのスタイルシートです。
この座標と基準点のうち、「position」プロパティは基準点を定めるためのプロパティです。通常は、単体で指定することはなく、以下の座標点を定めるプロパティと併用します。
- 上端から下方向の位置を指定する top
- 下端から上方向の位置を指定する bottom
- 左端から右方向の位置を指定する left
- 右端から左方向の位置を指定する right
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;}
クラスを指定した各段落要素の配置を指定 サンプル
