CSS свойство right

Свойство right задает позицию правого края элемента.

Свойство right используется для установления правого края отступа элемента и правого края его блока для абсолютно или фиксированно позиционированных элементов.

Если свойство position установлено в значение "static", свойство right не будет иметь эффекта.

Эффект свойства right зависит от положения элемента (смотрите свойство position).

Если свойство position установлено в значение "absolute" или "fixed", свойство right будет указывать расстояние от правого края элемента до правого края его блока.
Если свойство position установлено в значение"relative", свойство right будет указывать расстояние от правого края исходного положения элемента.
Если свойство position установлено в значение "sticky", свойство right изменит позицию на relative, когда элемент будет внутри окна просмотра, а когда он будет вне окне просмотра, позиция изменится на fixed.
Если свойство position установлено в значение "static", не будет никакого эффекта.

Значение по умолчанию	auto
Применяется	К позиционированным элементам.
Наследуется	Нет
Анимируемое	Да. Позиция элемента анимируема.
Версия	CSS2
DOM синтаксис	Object.style.right = "50px";

Синтаксис

right: auto | length | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      position: absolute;
      right: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства right</h2>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41">
  </body>
</html>

Попробуйте сами!

Пример, где свойство right указано в "%":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{
      height:150px;
      width:100%;
      background-color: #ccc;
      color: #ffffff;
      }
      img {
      position: absolute;
      right: 30%;
      top:120px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства right</h2>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41">
    <div>div элемент.</div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	Устанавливает позицию правого края. Значение по умолчанию.
length	Устанавливает позицию правого края в единицах измерения длины (px, cm и др.). Отрицательные значения допустимы.
%	Устанавливает позицию правого края в процентах. Отрицательные значения допустимы.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.