ボックスの配置と基準

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;」という値は対応していません。