Огляд
Свойство right визначає відстань від правого краю батьківського елемента до правого краю дочірнього елемента. Положення елемента залежить від значення властивості position.
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Для позиціонованого елемента встановлює відстань від правого краю батьківського елемента до правого краю дочірнього елемента.
Синтаксис
right: значення | відсотки | auto | inherit
Значення
Можна використовувати будь-які одиниці довжини, такі як пікселі (px), дюйми (in), пункти (pt) тощо. Значення right може бути від'ємним, що може призвести до накладання елементів один на одного. При встановленні значення в відсотках, положення елемента обчислюється в залежності від ширини батьківського елемента.
- auto
- Не змінює положення елемента.
- inherit
- Наслідує значення батька.
Приклад
HTML5CSS2.1IECrOpSaFx
<!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.
Об'єктна модель
[window.]document.getElementById("elementID").style.right
Браузери
У браузері Internet Explorer 6 для абсолютно позиціонованих елементів не можна одночасно встановити властивості top, left, right, bottom.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.