<position>

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
<position>Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Four-value syntax for offset from any edgeChrome 完全対応 25Edge 完全対応 12Firefox 完全対応 13IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 7WebView Android 完全対応 ≤37Chrome Android 完全対応 25Firefox Android 完全対応 14Opera Android 完全対応 ありSafari iOS 完全対応 7Samsung Internet Android 完全対応 1.5
Syntax combining a keyword and <length> or <percentage>Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Three-value syntax for properties other than background-position
非推奨
Chrome 未対応 25 — 68Edge 完全対応 12Firefox 未対応 13 — 70IE 完全対応 9Opera 未対応 10.5 — 55Safari 完全対応 1WebView Android 未対応 ≤37 — 68Chrome Android 未対応 25 — 68Firefox Android 完全対応 14Opera Android 未対応 ? — 48Safari iOS 完全対応 1Samsung Internet Android 未対応 1.5 — 10.0

凡例

完全対応  
完全対応
未対応  
未対応
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。