W3docs
ru
Войти

CSS свойство right

How to use the right CSS property to set the right position of an element. See the property values in use and practice.

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

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

info

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

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

  • Если position установлено в absolute или fixed, свойство right указывает расстояние между правым краем элемента и правым краем его содержащего блока.
  • Если position установлено в relative, свойство right указывает, насколько правый край элемента смещается вправо от своей нормальной позиции.
  • Если position установлено в sticky, свойство right указывает расстояние от правого края области просмотра, когда элемент становится липким.
  • Если position установлено в static, свойство не оказывает эффекта.
Начальное значениеauto
Применяется кПозиционированным элементам.
НаследуетсяНет.
АнимацияДа. Позиция элемента может анимироваться.
ВерсияCSS2
Синтаксис DOMObject.style.right = "50px";

Синтаксис

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

right: auto | length | initial | inherit;

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

<!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="/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
  </body>
</html>
Попробуйте сами »

Результат

CSS right Property

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

<!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="/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
    <div>This is some div element.</div>
  </body>
</html>
Попробуйте сами »

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

<!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>
Попробуйте сами »

Значения

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

Практика

Практика

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