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 може бути і від'ємним, в цьому випадку можливі накладення різних елементів один на одного.

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

auto

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

автор: Svitlana

правити

length

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

автор: Svitlana

правити

%

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	5	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="area">
    <div class="absolute">right: 20px</div>
</div>

.area {
    position: relative;
    height: 160px;
    background: #eee;
}

div.absolute {
    position: absolute;
    right: 20px;
    width: 200px;
    height: 120px;
    border: 3px solid #8AC007;
}