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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

1.0+ 12.0+ 1.0+ 1.0+ 5.0+


Считаете ли это полезным?

Похожие статьи