position (CSS data type)

概要

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

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

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

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

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

補間

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

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つとる、固定オフセットによる構文 */

仕様

仕様書 策定状況 コメント
CSS Values and Units Module Level 3 勧告候補 要件の矛盾をなくすため、両定義へのリンクを再掲。CSS Backgrounds and Borders Module Level 3 がサポートされれば、そこにある <position> の定義も使う必要があります。
CSS Backgrounds and Borders Module Level 3 勧告候補 <position> を明示的に定義し、辺からのオフセットをサポートするように拡張。
CSS Level 2 (Revision 1) 勧告 <length><割合> 値とキーワードの組み合わせを許可。
CSS Level 1 勧告 <position>background-position の値の匿名として定義。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Combination of a keyword and a <length> or <割合> 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Four-value syntax (support for offset from any edge) 未サポート WebKit bug 37514 13.0 (13.0) 未サポート 10.5 未サポート WebKit bug 37514
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) 1.0 (1) (有) (有) (有)
Combination of a keyword and a <length> or <割合> (有) 1.0 (1) (有) (有) (有)
Four-value syntax (support for offset from any edge) 未サポート 13.0 (13.0) ? ? 未サポート

関連情報

添付ファイル

ファイル サイズ 日時 添付者:
Visual description of a <position> value
Shows the different position syntax and their meaning
83592 バイト 2012-07-30 01:57:08 teoli

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す