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 の値として無名で定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Syntax combining a keyword and <length> or <percentage>Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Four-value syntax for offset from any edgeChrome 完全対応 25Edge 完全対応 12Firefox 完全対応 13IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 7WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 7.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

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

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