最終更新日
object-positionは、ボックス内のオブジェクトの位置を指定するプロパティです。
object-positionは、background-positionが背景画像に及ぼすものと同じ効果を与えます。
値は、「パーセント値」「長さ」「キーワード」の1~4個の組み合わせとなります。それぞれの値は半角スペースで区切って指定します。
値が1個の場合は、2個目の値は「center」の指定と同じです。
値が2個の場合は、水平方向の配置と垂直方向の配置です。値がパーセント値または長さの場合は、配置領域の左上からオブジェクトの左上までを示します。
値が3~4個の場合は、位置を表すキーワードと、そのキーワード位置からの距離を示します。なお、値が3個の場合、省略されている位置は「0」になります。
初期値 | 適用先 | 継承 |
---|---|---|
50% 50% | 置換要素 | なし |
値 | 説明 |
---|---|
パーセント値 | 配置領域の幅または高さの相対位置と、オブジェクトの幅または高さの相対位置を合わせる。 |
長さ | 「px」や「em」などのサイズで、水平または垂直方向の位置を指定する。 |
top | 値が1個または2個の場合は上端を示す。それ以外は相対位置を示す基準としての上端を意味する。 |
right | 値が1個または2個の場合は右端を示す。それ以外は相対位置を示す基準としての右端を意味する。 |
bottom | 値が1個または2個の場合は下端を示す。それ以外は相対位置を示す基準としての下端を意味する。 |
left | 値が1個または2個の場合は左端を示す。それ以外は相対位置を示す基準としての左端を意味する。 |
center | 水平位置または垂直位置の数値が指定されない場合は、水平の位置が50%または垂直の位置が50%と同じ。 |
object-position: left 10px top 15px; object-position: right 3em bottom 10px; object-position: 100% 100%;