PR
用途 ボックスの表示方法を決める
static | relative | absolute | fixed | inherit
対象となる要素 動的に生成された要素を覗く、すべての要素
解説

ボックスの表示方法を決定するためのプロパティです。ボックスのオフセット(位置をずらすこと)方向は、別途'top'、'right'、'bottom'、'left'のプロパティを使って決めます。具体的な位置はtopなどと指定したあと、数値で指定します。

本プロパティで指定可能な値と記述例、サンプルは以下から参照してください。

'static'
ブラウザが通常内容を表示するのと同じ流れでボックスをレイアウトします。'position'を指定しない場合適用されているのがこの値です。ブラウザは普通ウィンドウの上部、左から右の方向にコンテンツを流しますから、'position'が'static'(つまり初期値)の場合'left'および'top'は適用されないことになります。

スタイルを適用しないサンプルページの表示(別ウィンドウ)

'relative'
static同様、通常の流れに沿ってボックスを表示しますが、この値を適用したボックス以降のボックス表示位置に影響を与えない位置決め方法になります。例えばこのプロパティを使えば、XHTML内では記述の最後に出てきたフッターを、レイアウトの都合上ブラウザウィンドウの上部に登場させるといったことが可能です。このような順序の入れ替えは文書構造上では優先順位の高い「グローバルナビゲーション」を、それよりも順位の低い「ユーザー支援用リンク」などとレイアウト上入れ替える際などに行います。サンプルページ右上に表示しているリンク群が'position'適用個所です。

スタイルの例

div#Usernav {
position: relative;
top: -285px;

}

サンプルページの表示(別ウィンドウ)

'absolute'
ボックスを絶対的な位置に指定する値です。この値を取るボックスは通常の内容の流れからは切り離されます。位置を指定したいボックスが属している親のボックスの左上を基準点として、そこから'top'、'right'、'bottom'、'left'で指定した方向に表示位置をずらすことが可能です。このプロパティで配置した要素はレイヤーのように扱うことが可能です。完成したページのレイアウトに、お知らせ用の囲み文章などを期間限定で貼り付けるといった場合に便利です。位置の指定方法に%を使用すれば、親ボックスの位置が変わると相対的にレイヤー化した要素の位置も変わるレイアウトが作れます。サンプルの画像に重なったお知らせ部分は、'left'の指定を50%にしたものです。
※サンプルページの最後に<div id="info">でマークアップしたお知らせの記述を追加しています。

スタイルの例

div#info {
position:absolute;
background-color: #FFFFFF;
border: 2px solid #0066CC;
height: 107px;
width: 284px;
left: 50%;
top: 98px;

padding:5px;
}

サンプルページの表示(別ウィンドウ)

'fixed'
'absolute'同様、通常の流れを無視してボックスの表示位置を決める計算方法です。こちらの場合、ボックスを表示領域内の任意の位置に固定することができます。1ページが非常に長いメディアの場合には、ナビゲーション用のボックスを常に画面上に表示させておきたいこともあるでしょう。そのような時にこの値を使い、ナビゲーションボックスを固定の位置に表示させ、スクロールアウトしない設定にできます。サンプルではページの前半部分、ナビゲーションのグループに'position'を適用しています。ただし、Internet Explorer 6でこのプロパティは解釈されません。
※サンプルページの前半部分を<div id="navigations">で再度グループ化し、後半部分に<div id="lower">を追加して上下に分けています。

スタイルの例

div#navigations {
position:fixed;
background-color: #FFFFFF;
}

サンプルページの表示(別ウィンドウ)

値の表記について

  1. CSS2のプロパティは解説の中で<color>など単位の表記と混同することを避ける目的でSingle Quotation(')で囲っています。
  2. Box bracket [ ] は、各プロパティに指定可能な値をグループ化しています。
  3. Bar | は各プロパティに指定可能な値を区切っています。
  4. 2重のBar || は各プロパティに指定可能な値のグループ、または個別の特性を持つプロパティを区切っています。
  5. inheritは親要素のプロパティが継承できる種類であることを意味します。
  6. <length>や<color>、<percentage>などAngle brackets < > で囲ったものは、それぞれ単位を採用できる値です。
  7. <margin-width>{1,4}のように単位がBraces { }で囲った整数を伴う場合は、その数だけ単位の指定が可能です。例の場合は単位を上、下、左、右のように1つ以上、4つ以下で単位を複数指定できる、という意味になります。
  8. <length>? のように単位が疑問符を伴う場合は、単位を0または1つだけ指定できる、という意味になります。
  9. [<uri> ,]* のように単位がAsteriskを伴う場合は、単位を0以上指定できます。つまり指定しなくても良い、または必要あれば可能な限り指定できるという意味です。
  10. [ <identifier> <integer>? ]+ のように単位(のグループ)がPlus + を伴う場合は、単位を必要あれば可能な限り指定できるという意味です。例の場合は識別子と整数(1つだけ)のセットを必要なだけ指定できる、となります。