<position>

Базовая Широкодоступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с сентября 2015 года.

Тип данных <position> CSS данных обозначает двумерные координаты, используемые для задания расположения относительно элемента.

Он используется в свойствах background-position, object-position, mask-position offset-position, offset-anchor и transform-origin.

Примечание: Конечное положение, задаваемое значением <position>, не обязательно должно находиться внутри элемента.

Синтаксис

Grid showing placement of various values. 0 0 is the top left corner. The four values, right, right center, center left 100%, and top 50% left 100%, are all equivalent, being on the right edge in the middle vertically. The two values, top 75px left 100px and left 100px top 75px, are the same. Bottom left 25% is the same as top 100% left 25%.

Тип данных <position> задаётся одним или двумя ключевыми словами с необязательными смещениями.

Ключевые слова — center, top, right, bottom, и left. Каждое ключевое слово представляет собой либо край рамки элемента, либо центральную линию между двумя краями. В зависимости от контекста, center представляет либо центр между левым и правым краями, либо центр между верхним и нижним краями.

Если указаны смещения, они могут быть относительными значениями <percentage> или абсолютными значениями <length>. Положительные значения смещают вправо или вниз соответственно. Отрицательные значения смещают в противоположные стороны.

Если указано только одно смещение, оно определяет координату x, а значение для другой оси устанавливается по умолчанию center.

/* 1-value syntax */
keyword                  /* Either the horizontal or vertical position; the other axis defaults to center */
value                    /* The position on the x-axis; the y-axis defaults to 50% */

/* 2-value syntax */
keyword keyword          /* A keyword for each direction (the order is irrelevant) */
keyword value            /* A keyword for horizontal position, value for vertical position */
value keyword            /* A value for horizontal position, keyword for vertical position */
value value              /* A value for each direction (horizontal then vertical) */

/* 4-value syntax */
keyword value keyword value /* Each value is an offset from the keyword that precedes it */

Примечание: Свойство background-position также поддерживает синтаксис с тремя значениями. Это недопустимо для других свойств, использующих <position>.

Интерполяция

При анимации значения абсциссы и ординаты точки интерполируются независимо. Однако, поскольку скорость интерполяции определяется одной функцией сглаживания для обеих координат, точка будет перемещаться по прямой.

Формальный синтаксис

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<length-percentage> = 
  <length>      |
  <percentage>

Примеры

Допустимые позиции

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 4 # position

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`position_value`	1	12	1	3.5	1	18	4	14	1	1.0	≤37
`four_value_syntax`	25	12	13	10.5	7	25	14	14	7	1.5	4.4
`keyword_value_syntax`	1	12	1	3.5	1	18	4	14	1	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/position_value