CSS<position> データ型は、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 background-position で使用されています。

メモ: <position> 値で記述される最終的な位置は、要素ボックスの中である必要はありません。

構文

The <position> データ型は1~2つのキーワードと、任意のオフセットで定義されます。

キーワード値は centertoprightbottomleft です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 center は左右の辺の中心か、上下の辺の中心を表します。

オフセット値を指定する場合は、相対的な <percentage> 値か絶対的な <length> 値のどちらかで指定することができます。正の数は右または下(適切な方)に向けたオフセットで、負の数は逆方向のオフセットです。

単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の center に設定されます。

/* 値1つの構文 */
keyword                  /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */
value                    /* X 座標の位置。 Y 座標は既定値の 50% になる */

/* 値2つの構文 */
keyword keyword          /* それぞれの方向のキーワード(順不同) */
keyword value            /* キーワードで定義された辺からのオフセット */
value keyword            /* 水平位置を表す値、垂直位置を表すキーワード */
value value              /* それぞれの方向(水平、垂直)の距離の値 */

/* 値4つの構文 */
keyword value keyword value /* それぞれの値はその前のキーワードからのオフセット */

形式文法

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

補間

アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つのタイミング関数が用いられるため、座標は直線に移動します。

有効な位置

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px

無効な位置

left right
bottom top
10px 15px 20px 15px

仕様書

仕様書 状態 備考
CSS Values and Units Module Level 3
<position> の定義
勧告候補 両方の定義のリンクを再掲。 CSS Backgrounds and Borders Module Level 3 に対応する場合、 <position> の定義も使用される。
CSS Backgrounds and Borders Module Level 3
<position> の定義
勧告候補 <position> を明示的に定義し、すべての辺からのオフセットに対応するよう拡張。
CSS Level 2 (Revision 1)
<position> の定義
勧告 キーワードと <length> または <percentage> の値の組み合わせを許可。
CSS Level 1
<position> の定義
勧告 <position>background-position の値として無名で定義。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112143.51
Syntax combining a keyword and <length> or <percentage>112143.51
Four-value syntax for offset from any edge251213910.57
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
Syntax combining a keyword and <length> or <percentage> あり あり あり4 あり あり あり
Four-value syntax for offset from any edge あり あり あり14 あり7.1 あり

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mrstork, fscholz, teoli, ethertank, sosleepy
最終更新者: mfuji09,