right
=====

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` (en-US) и `right`, и элемент не может растянуться, чтобы им соответствовать, то позиционированние элемента is *overspecified*. В этом случае значение `left` имеет приоритет, when the container is left-to-right; и наоборот, значение `right` имеет приоритет, when the container is right-to-left.

Синтаксис
---------


```css
/\* Ключевые слова \*/
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` (en-US) property, while `width: auto` is treated as a width based on the content; or if `left` is also `auto`, 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` (en-US) property; or if `left` is also `auto`, the element is not moved horizontally at all.

`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 the `auto` keyword.

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

right =   
  auto                 | (en-US)  
  <length-percentage>    
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

Примеры
-------


```css
#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;
}
```



```html
<div id="example\_3">Example 3</div>
<div id="example\_4">Example 4</div>
```

Спецификации
------------

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | позиционированные элементы |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | если указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае `auto` |
| Animation type | длина, проценты или calc(); |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `position`, `left` (en-US), `top`, `bottom`