CSS свойство right

Определение и применение

CSS свойство right указывает направление смещения позиционированного элемента от правого края.

Попробуйте right в тренажёре позиционирования: меняйте отступы, наблюдайте прокрутку и решайте практические задания.

Результат применения свойства right напрямую зависит от позиционирования элемента к которому оно применяется, т.е. элемент будет смещаться в зависимости от значения свойства position:

1. position: relative; (элемент с относительным позиционированием) - при использовании свойства right элемент смещается влево или вправо относительно его текущей позиции (отрицательное значение смещает вправо, положительное влево). На примере right: -30px;
2. position: absolute; (элемент с абсолютным позиционированием) - при использовании свойства right смещается влево или вправо относительно правого края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static, иначе отсчёт будет вестись относительно правого края окна браузера (как при position: fixed;). На примере right: 30px;
3. position: fixed;(элемент с фиксированным позиционированием) - при использовании свойства right элемент смещается влево или вправо относительно правого края окна браузера. На примере right: 75px;
4. position: static; (элемент со статическим позиционированием - по умолчанию) - значение свойства right не повлияют на позиционирование элемента.

Для absolute отсчёт ведётся от содержащего блока: его может создать не только позиционированный предок, но и, например, transform. Без такого предка используется начальный содержащий блок, а не закрепление к окну как при fixed. Для fixed преобразованный предок тоже может заменить окно отсчёта. При sticky смещение задаёт порог прилипания внутри ближайшей области прокрутки.

Попробуйте значения right

<div class="stage">
  <div class="demo-target">Блок</div>
</div>

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 200px;
  position: relative;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  position: absolute;
  width: 90px;
  height: 60px;
  right: auto;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 200px;
  position: relative;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  position: absolute;
  width: 90px;
  height: 60px;
  right: 0;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 200px;
  position: relative;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  position: absolute;
  width: 90px;
  height: 60px;
  right: 24px;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 200px;
  position: relative;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  position: absolute;
  width: 90px;
  height: 60px;
  right: 50%;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

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

Спецификация: CSS position

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.right

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
right	✓1	✓12	✓1	✓5	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
anchor	✓125	✓125	✓147	✓111	✓26	✓125	✓147	✓83	✓26	✓27.0	✓125	✓26
anchor-size	✓132	✓132	✓147	✓117	✓26	✓132	✓147	✓87	✓26	✓29.0	✓132	✓26
auto	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

CSS синтаксис:

right: auto | <length-percentage> | <anchor()> | <anchor-size()>;

/* Глобальные значения */
right: initial | inherit | unset | revert | revert-layer;

| — выбор варианта.

JavaScript синтаксис:

element.style.right = "100px";

Начальное значение свойства

auto.

Значения свойства

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

CSS Anchor Positioning — спецификация right.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: совместимые числовые значения интерполируются плавно. Переход между несовместимыми типами или ключевыми словами может быть дискретным.

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

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.scene {
    border: 1px dashed #8495a5;
}
.sample {
    padding: 16px;
    background: #c5dbea;
}

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Смещение от края контейнера</title>
  </head>
  <body>
    <div class="scene"><div class="sample">Блок</div></div>
  </body>
</html>

.scene {
    position: relative;
    height: 180px;
}
.sample {
    position: absolute;
    right: 20px;
}