PR
用途 'position' を適用したボックスのオフセット方向を指定
<length> | <percentage> | auto | inherit
対象となる要素 'position'を適用した要素のみ
解説

'position' と合わせて使用する、オフセット方向とその値を指定する方法です。
内容の流れが左から始まって右に、なおかつ内容が増えるに従い上から下へ表示を増やすブラウザでは、'left'をx軸として、'top'をy軸として捉えて位置を決めることが多くなります。よって'right'と'bottom'は使う機会が少ないといえます。

'top'
ボックスの内容の上辺を、そのボックスを内包しているボックス(親のボックス)からどのていど下にずらすかを決めるための値です。値に%を取る場合は親のボックスの高さを参照します。

'right'
ボックスの内容の左辺を、そのボックスを内包しているボックス(親のボックス)からどのていど右にずらすかを決めるための値です。値に%を取る場合は親のボックスの幅を参照します。

'bottom'
ボックスの内容の下辺を、そのボックスを内包しているボックス(親のボックス)からどのていど上にずらすかを決めるための値です。値に%を取る場合は親のボックスの高さを参照します。

'left'
ボックスの内容の右辺を、そのボックスを内包しているボックス(親のボックス)からどのていど左にずらすかを決めるための値です。値に%を取る場合は親のボックスの幅を参照します。

上記4つのプロパティで指定可能な値は3つですが、それぞれ以下のような特徴があります。

<length>
ブラウザの標準的なフォントサイズ1文字ぶんを表すem、ブラウザの標準的なフォントサイズで表示したx(エックス)の高さ(x-height)を表すex、モニタ解像度に応じたピクセル寸法のpxの3つの値が指定できます。

<percentage>
親ブロックの幅または高さに依存する相対値となります。ただし親ボックスが500pxのように絶対値で指定した高さを持っていない場合はautoと同様に解釈されます。ブラウザにもよりますが、たくさんの条件が重なると(親ブロックの高さの50%の位置」のような指定をするのは難しくなります。特に内容量によりページ全体の高さが変わるようなケースでは高さ位置の%指定は難しいといえます。

auto
親ボックスなど関連ある要素が取るプロパティによって結果が変わる値です。

スタイルの例

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

padding:5px;
}

サンプルはpositionを参照

値の表記について

  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つだけ)のセットを必要なだけ指定できる、となります。