Aug. 24th,2021
““<position>”値”とは？
“<position>”値は基準となる領域からの相対的な二次元の配置位置を表します。“object-position”プロパティや“mask-position”プロパティなどの値として使用することができます。
“<position>”値”はもともと“background-position”プロパティの値として定義されている“<bg-position>”値を汎用的に定義しなおしたものです。
“<position>”値の記述方法
“<position>”値は“left”、“center”、“right”、“top”、“bottom”と“<length-percentage>”値をホワイトスペース(半角スペース(“ ”)、タブ文字など)で区切って1個、2個もしくは4個記述して位置を表します。
値を1つ指定する場合
値が“left”または“right”の場合、その値は水平方向の位置を指定します。垂直方向の位置は“center”とみなされます。
領域の左端、上下中央に配置
left
領域の右端、上下中央に配置
right
値が“top”または“bottom”の場合、その値は垂直方向の位置を指定します。水平方向の位置は“center”とみなされます。
領域の上端、左右中央に配置
top
領域の下端、左右中央に配置
bottom
値が“center”の場合は水平方向と垂直方向の両方の位置を指定します。
領域の中央に配置
center
値を“<length-percentage>”値で指定した場合はその値は水平方向の位置を指定します。垂直方向の位置は“center”とみなされます。
上下中央、水平方向には左端から指定した距離に配置
〚水平方向の“<length-percentage>”値〛
値を2つ指定する場合
値を2つ指定する場合には一方の値が水平方向の位置、もう一方の値が垂直方向の位置を指定します。どちらの値がどの方向に対応するかは値の組み合わせによって異なります。
垂直方向の位置と水平方向の位置
〚水平方向の位置〛 〚垂直方向の位置〛
水平方向の位置と垂直方向の位置
〚垂直方向の位置〛 〚水平方向の位置〛
一つ目の値が“left”もしくは“right”の場合、1つ目の値は水平方向の位置を表し、2つ目の値は垂直方向の位置を表します。2つ目の値には“top”、“bottom”、“center”、もしくは“<length-percentage>”値を指定できます。
領域の左端、垂直方向には上端から指定した距離に配置
left 〚垂直方向の“<length-percentage>”値〛
領域の右端、垂直方向には上端から指定した距離に配置
right 〚垂直方向の“<length-percentage>”値〛
一つ目の値が“top”もしくは“bottom”の場合、1つ目の値は垂直方向の位置を表し、2つ目の値は水平方向の位置を表します。2つ目の値には“left”、“right”、“center”、もしくは“<length-percentage>”値を指定できます。
領域の上端、水平方向には左端から指定した距離に配置
top 〚水平方向の“<length-percentage>”値〛
領域の下端、水平方向には左端から指定した距離に配置
bottom 〚水平方向の“<length-percentage>”値〛
一つ目の値が“center”の場合には二つ目の値に“top”、“bottom”、“left”、“right”、“center”、“<length-percentage>”値のいずれも指定できます。
二つ目の値が“top”もしくは“bottom”の場合は“center”は水平方向の位置、二つ目の値が垂直方向の位置を表します。
二つ目の値が“left”、“right、“center”、もしくは“<length-percentage>”値の場合は“center”は垂直方向の位置、二つ目の値が水平方向の位置を表します。
垂直方向の位置と水平方向の位置
center 〚水平方向の“<length-percentage>”値〛
水平方向の位置と垂直方向の位置
center 〚垂直方向の“<length-percentage>”値〛
一つ目の値が“<length-percentage>”値の場合にも二つ目の値に“top”、“bottom”、“left”、“right”、“center”、“<length-percentage>”値のいずれも指定できます。
二つ目の値が“top”もしくは“bottom”、もしくは“<length-percentage>”値の場合は一つ目の値は水平方向の位置、二つ目の値が垂直方向の位置を表します。
二つ目の値が“left”、“right、“center”の場合は一つ目の値は垂直方向の位置、二つ目の値が水平方向の位置を表します。
垂直方向の位置と水平方向の位置
〚垂直方向の“<length-percentage>”値〛 〚“left”、“right”もしくは“center”〛
水平方向の位置と垂直方向の位置
〚水平方向の“<length-percentage>”値〛 〚“top”、“left”もしくは“center”〛
値を4つ指定する場合
値が4つの場合、キーワード値とオフセット距離の組が2組です。“top”もしくは“bottom”、“left”もしくは“right”と“<length-percentage>”値を組み合わせることでキーワード値からのオフセット距離を指定することができます。
1組は垂直方向の位置を表す“top”もしくは“bottom”と“<length-percentage>”値の組み合わせ、もう1組は水平方向の位置を表す“left”もしくは“right”と“<length-percentage>”値の組み合わせを指定します。
“<length-percentage>”値は、正の値はキーワード値で指定した端から内側へ向けての距離、負の値はキーワード値で指定した端から外側へ向けての距離を表します。
垂直方向の位置と水平方向の位置
〚“top”もしくは“bottom”〛 〚“<length-percentage>”値〛 〚“left”もしくは“right”〛 〚“<length-percentage>”値〛
水平方向の位置と垂直方向の位置
〚“left”もしくは“right”〛 〚“<length-percentage>”値〛 〚“top”もしくは“bottom”〛 〚“<length-percentage>”値〛
値は入れ替えることができますが、オフセット距離はその基準となるキーワード値の次の値として記述する必要があります。
