right
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS свойство right
частично определяет горизонтальное положение позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. right
не применится, если задано position: static
).
Интерактивный пример
Эффект свойства right
зависит от того, как позиционируется элемент (то есть от значения свойства position
):
- Когда задано
position: absolute
илиfixed
— свойствоright
устанавливает расстояние между правым краем элемента и правым краем содержащего его блока. - Когда задано
position: relative
— свойствоright
устанавливает расстояние, на которое правый край элемента перемещается влево от его обычной позиции. - Когда задано
position: sticky
— свойствоright
работает так, как приposition: relative
во время нахождения элемента внутри области просмотра, и какposition: fixed
вне области просмотра. - Когда задано
position: static
— свойствоright
не имеет никакого эффекта.
Когда заданы оба свойства left
и right
, и элемент не может растянуться, чтобы им соответствовать, то позиционированние элемента is overspecified. В этом случае значение left
имеет приоритет, when the container is left-to-right; и наоборот, значение right
имеет приоритет, when the container is right-to-left.
Синтаксис
/* Ключевые слова */
right: auto;
/* Значения величин */
right: 3px;
right: 2.4em;
/* Процентные значения от высоты родительского блока */
right: 10%;
/* Глобальные значения */
right: inherit;
right: initial;
right: unset;
Значения
<length>
-
Отрицательная, нулевая или положительная величина, которая представляет:
- for absolutely positioned elements, the distance to the right edge of the containing block.
- for relatively positioned elements, the distance that the element is moved to the left of its normal position.
<percentage>
-
A
<percentage>
of the containing block's width. auto
-
Specifies that:
- for absolutely positioned elements, the position of the element is based on the
left
property, whilewidth: auto
is treated as a width based on the content; or ifleft
is alsoauto
, the element is positioned where it should horizontally be positioned if it were a static element. - for relatively positioned elements, the distance of the element from its normal position is based on the
left
property; or ifleft
is alsoauto
, the element is not moved horizontally at all.
- for absolutely positioned elements, the position of the element is based on the
inherit
-
Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a
<length>
,<percentage>
, or theauto
keyword.
Формальный синтаксис
right =
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Примеры
#example_3 {
width: 100px;
height: 100px;
background-color: #ffc7e4;
position: relative;
top: 20px;
left: 20px;
}
#example_4 {
width: 100px;
height: 100px;
background-color: #ffd7c2;
position: absolute;
bottom: 10px;
right: 20px;
}
<div id="example_3">Example 3</div>
<div id="example_4">Example 4</div>
Спецификации
Specification |
---|
CSS Positioned Layout Module Level 3 # insets |
Совместимость с браузерами
BCD tables only load in the browser