css властивість right


Властивість right визначає відстань відступу від правого краю батьківського елемента до правого краю дочірнього елемента.

Властивість `right`

Поведінка цієї властивості залежить від значення властивості position:

  • position:absolute - батьківським елементом виступає вікно браузера і положення елемента визначається від його правого краю.
  • position:relative - відстань рахується від правого краю початкового положення елемента.
  • Якщо у батьківського елемента вказано position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від правого краю батькаівського елемента.
  • position:static - властивість right не працює.

Якщо для елементу зазначено відразу left і right, його позиція перевизначається.

Якщо це так, властивість left має перевагу над right, коли контейнер розташований ліворуч направо, і навпаки: right має перевагу над left, якщо контейнер розташований праворуч наліво.

Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості right може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного. При завданні значення у відсотках, положення елемента обчислюється залежно від висоти батьківського елементу.

Нотатка:

Значення властивості right може бути і від'ємним, в цьому випадку можливі накладення різних елементів один на одного.

Нотатка:

Якщо елемент з position:absolute не має батьків, він буде використовувати в якості батька вікно браузера, і рухатися разом зі сторінкою при її прокрутці.

Синтаксис

right: auto|length|%|initial|inherit;

Властивість right може отримувати 5 значень:

auto

Браузер самостійно розрахує велечину відступа. Без задання.

length

Встановлює відстань відступу в px, cm і т.п. Від'ємні значення дозволяються.

%

Встановлює відстань відступу в %. Від'ємні значення дозволяються.

initial

Встановлює цю властивість в значення без задання

inherit

Успадкує значення властивості від свого батьківського елемента

Значення без задання: auto
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.right="200px"

Переглядачі

Переглядач
right

1.0

5.5

1.0

1.0

5.0

Переглядач
right

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Приклад використання властивості

Позиціонування блоку праворуч відносно body.

Відступ від правого краю буде 20 пікселей.

div.absolute {


    position: absolute;


    right: 20px;


    width: 200px;


    height: 120px;


    border: 3px solid #8AC007;


}

Додаткові посилання