<position>

概要

CSS のデータ型 <position> は 2 次元空間上の座標を示し、特定のボックスからの相対的な位置設定に使われます。

座標は、 2 つのキーワードと一定のオフセットを使って定められます。キーワードは、要素の一辺、または二辺間の中央線を表します: left、right、top、bottom または center（これはコンテキストによって、左辺と右辺の中央線と、上辺と下辺の中央線のどちらも表します）。

オフセットは <percentage> で表される相対値か、絶対値 <length> のいずれかになります。正の数は右向きか下向きのどちらか適当なほうのオフセットです。負の数は残りの方向へのオフセットです。

値 <position> が表す最終的な位置は、要素のボックス内にある必要はありません。

オフセットが関連したキーワードで与えられない場合、center であるものと想定されます。

補間

横座標と縦座標の値の補間は別々に行われます。速度がどちらの座標に対しても同一の <timing-function> で定義されている限り、点は線上を動きます。

値

Formal grammar: [ [ left | center | right | top | bottom | <percentage> | <length> ] |
                  [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] |
                  [ center | [ left | right ] [ <percentage> | <length> ]? ] && 
                  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
                ]

/* 値を1つとる構文 */
キーワード                  /* 辺。残りは辺の中央 center に調整される */
<長さ> または <パーセンテージ> /* X軸上の位置になり、Y軸上の位置は 50% になる */

/* 値を2つとる構文 */
キーワード キーワード          /* 関連性のない向きの組み合わせ */
キーワード 値            /* 値はキーワードで定義した辺に対するオフセット */

/* 値を2つとる、固定オフセットによる構文 */

仕様

ブラウザ実装状況