Тип CSS `<position>`
Базовая поддержка Широко доступно
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна в браузерах с сентября 2015 года.
<position> — это CSS-тип данных, обозначающий двумерную координату, используемую для задания положения относительно блока элемента. Он применяется в свойствах background-position, object-position, mask-position, offset-position, offset-anchor и transform-origin.
Примечание: конечное положение, описываемое значением <position>, не обязательно должно находиться внутри блока элемента.
Синтаксис
Тип данных <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 | 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
Спецификации
Совместимость с браузерами
| Настольные компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari для iOS | Samsung Internet | WebView для Android | WebView для iOS | |
position |
1 |
12 |
1 |
3.5 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
four_value_syntax |
25 |
12 |
13 |
10.5 |
7 |
25 |
14 |
14 |
7 |
1.5 |
4.4 |
7 |
keyword_value_syntax |
1 |
12 |
1 |
3.5 |
1 |
18 |
4 |
14 |
1 |
1.0 |
4.4 |
1 |
См. также
- Модуль значений и единиц CSS
- Изучение: значения и единицы CSS
background-positionradial-gradient()conic-gradient()
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/position_value
