css властивість right
Властивість right визначає відстань відступу від правого краю батьківського елемента до правого краю дочірнього елемента.
Поведінка цієї властивості залежить від значення властивості position:
position:absolute- батьківським елементом виступає вікно браузера і положення елемента визначається від його правого краю.position:relative- відстань рахується від правого краю початкового положення елемента.- Якщо у батьківського елемента вказано
position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від правого краю батькаівського елемента. position:static- властивість right не працює.
Якщо для елементу зазначено відразу left і right, його позиція перевизначається.
Якщо це так, властивість left має перевагу над right, коли контейнер розташований ліворуч направо, і навпаки: right має перевагу над left, якщо контейнер розташований праворуч наліво.
Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. Значення властивості right може бути і негативним, в цьому випадку можливі накладення різних елементів один на одного. При завданні значення у відсотках, положення елемента обчислюється залежно від висоти батьківського елементу.
| Нотатка: | Значення властивості |
| Нотатка: | Якщо елемент з |
Синтаксис
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;
}