Учебник по HTML и CSS |
|
Свойства CSS CSS по категориям
|
right
Краткая информация
ОписаниеДля позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, аргумент right отсчитывается от правого края исходного положения элемента. Рис. 1. Значение параметра right Синтаксисright: значение | проценты | auto АргументыВ качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра right может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента. Аргумент auto не изменяет положение элемента. Пример <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>right</title> <style type="text/css"> #leftcol { position: absolute; /* Абсолютное позиционирование */ top: 20px; /* Положение от верхнего края */ left: 20px; /* Положение от левого края */ width: 100px; /* Ширина блока */ background: #fc3; /* Цвет фона */ border: 1px solid #000; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ } #centercol { position: relative; /* Относительное позиционирование */ background: maroon; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ color: white; /* Цвет текста */ margin: 13px 250px 0px 130px; /* Отступы вокруг блока */ } #rightcol { position: absolute; /* Абсолютное позиционирование */ top: 20px; /* Положение от верхнего края */ right: 20px; /* Положение от правого края */ width: 200px; /* Ширина блока */ background: #ccc; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ } </style> </head> <body> <div id="leftcol">...</div> <div id="centercol">...</div> <div id="rightcol">...</div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение параметра right Объектная модель[window.]document.getElementById("elementID").style.right |
При использовании материалов сайта ссылка на comnew.ru обязательна! |