CSS свойство right

Свойство right определяет часть позиции позиционированных элементов.

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

INFO

Если position установлено в static, свойство right не оказывает эффекта.

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

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

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

Синтаксис

Синтаксис свойства CSS right

css

right: auto | length | initial | inherit;

Пример со значением `px`

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        right: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <img src="https://ru.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
  </body>
</html>

Try it Yourself »

Результат

CSS right Property

Пример со значением `%`

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 150px;
        width: 100%;
        background-color: #ccc;
        color: #ffffff;
      }
      img {
        position: absolute;
        right: 30%;
        top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <img src="https://ru.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
    <div>This is some div element.</div>
  </body>
</html>

Try it Yourself »

Пример со значением `initial`

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        max-width: 300px;
        line-height: 20px;
      }
      p {
        position: absolute;
        right: initial;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <div>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
      <p>Some text</p>
    </div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
auto	Устанавливает позицию правого края. Это значение по умолчанию для данного свойства.	Запустить »
length	Устанавливает позицию правого края в px, em, rem и т. д. Допускаются отрицательные значения.	Запустить »
%	Устанавливает позицию правого края в % от содержащего элемента. Допускаются отрицательные значения.	Запустить »
initial	Устанавливает свойство в значение по умолчанию (`auto`), позволяя браузеру автоматически вычислить позицию.	Запустить »
inherit	Наследует свойство от родительского элемента.

Практика

Какова роль свойства 'right' в CSS?

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

CSS свойство right ​

Синтаксис ​

Пример со значением px ​

Результат ​

Пример со значением % ​

Пример со значением initial ​

Значения ​

Практика ​

CSS свойство right

Синтаксис

Пример со значением `px`

Результат

Пример со значением `%`

Пример со значением `initial`

Значения

Практика