CSS властивості
ГлавнаяВластивості CSSАтрибут right в CSS

Атрибут right в CSS

289

Для позиціонованого елемента визначає відстань від правого краю батьківського елемента, не включаючи відступ, поле та ширину рамки, до правого краю дочірній елемент. Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, як батько виступає вікно браузера і положення елемента визначається від його правого краю (рис. 1). У разі значення relative, right відраховується від правого краю вихідного положення елемента. Якщо для батьківського елемента задано positionrelative, то абсолютне позиціонування дочірніх елементів визначає їхнє становище від правого краю батька (мал.  2).

Значення якості right щодо вікна браузера

Мал. 1. Значення властивості right щодо вікна браузера

Значення властивості right щодо батька

Мал. 2. Значення якості right щодо батька

field_css_info">Коротка інформація
Значення за замовчуванням auto
Успадковується Ні
Застосовується До всіх елементів
Анімується Так

Синтаксис

<code>right: <розмір> | <відсотки> | auto

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися в зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

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

auto
Не змінює положення елемента.

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>right</title> <style> .leftcol { position: absolute; /* Абсолютне позиціонування */
top: 20px; /* Положення від верхнього краю */
left: 10px; /* Положення від лівого краю */
width: 100px; /* Ширина блоку */
background: #fc3; /* Колір тла */
border: 1px solid #000; /* Параметри рамки */
padding: 10px; /* Поля навколо тексту */
} 
.centercol { position: relative; /* Відносне позиціонування */
background: maroon; /* Колір тла */
padding: 10px; /* Поля навколо тексту */
color: white; /* Колір тексту */
border: 1px solid #000; /* Параметри рамки */
margin: 20px 240px 0 140px; /* Відступи навколо блоку */
} 
.rightcol { position: absolute; /* Абсолютне позиціонування */
top: 20px; /* Положення від верхнього краю */
right: 10px; /* Положення від правого краю */
width: 200px; /* Ширина блоку */
background: #ccc; /* Колір тла */
border: 1px solid black; /* Параметри рамки */
padding: 10px; /* Поля навколо тексту */
}
</style>
</head>
<body> <div class="leftcol">Колонка 1</div> <div class="centercol">Колонка 2</div> <div class="rightcol">Колонка 3</div>
</body>
</html>

Результат цього прикладу показаний на рис. 3.

Застосування властивості right Рис. 3. Застосування якості right

Об'єктна модель

Об'єкт.style.right

Примітка

У браузері Internet Explorer до версії 7 для абсолютно позиціонованих елементів не можна одночасно задати властивості top, left, right, bottom.

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

Специфікація Статус
CSS Positioned Layout Module Level 3 Робочий проект
CSS Level 2 Revision 1 (CSS 2.1) Рекомендація

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

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

5.5 7 12 1 5 1 1
1 1 6 1

Браузери

У таблиці браузерів застосовуються такі позначення.

  •  — властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації.