Каждая таблица стилей образуется из наборов правил. Чтобы лучше понять, что же такое правила, давайте разберем их структуру. Каждое правило имеет две основные части: селектор (selector) и блок объявлений (declaration block).

Структура правила CSS

Блок объявлений состоит из одного или более объявлений (declarations), а каждое объявление представляет собой сочетание свойства (property) и значения (value).

Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. В правой части правила находится блок объявлений, образованный одним или несколькими объявлениями. Каждое объявление представляет собой сочетание свойства CSS и значения этого свойства. Выше представлен блок, содержащий два объявления. Первое определяет, что согласно правилу цвет (color) указанных элементов документа будет красным (red), а второе — что фон (background) этих элементов будет желтым (yellow). Таким образом, все элементы H1 (определённые селектором) этого документа будут выводиться красным текстом на желтом фоне.

Текущая категория

Свойства CSS — bottom;    top;     right;     left;

Три схемы позиционирования: relative, absolute и fixed — используют четыре разных свойства (bottom; top; right; left;) для описания смещения сторон позиционируемого элемента относительно его блока-контейнера. Эти четыре свойства, которые называются свойствами смещения (offset properties), делают большую часть работы по позиционированию.
Значения:

<?php
<длина> | <процентное значение> | auto inherit

Начальное значение: auto
Область применения: позиционированные элементы (т. е. элементы, для которых значение свойства position не равно static)
Наследование: нет
Процентные соотношения: относительно высоты блока-контейнера для top и bottom и ширины блока-контейнера для right и left
Вычисляемое значение: для относительно позиционированных элементов см. примечание ниже; для элементов static — auto; для значений в единицах длины — соответствующая абсолютная длина; для процентных значений — заданное значение; в противном случае — auto
Примечание: если и bottom, и top позиционированных элементов имеют значения auto, то для обоих вычисляемое значение равно 0; если одно из них имеет значение auto, оно принимает значение, равное по модулю, но противоположное по знаку значению другого; если ни одно из них не auto, bottom принимает значение, равное по модулю, но противоположное по знаку значению top. Значение свойства left всегда эквивалентно значения свойства right

Эт свойства описывают смещение относительно ближайшей стороны блока-контейнера (в соответствии со словом смещение (offset)). Например, свойство top описывает, на сколько должен отстоять верхний край поля позиционируемого элемента от верха его блока-контейнера. Для свойства top положительные значения перемещают верхний край поля позиционируемого элемента ниже, а отрицательные значения перемещают его выше верха его блока-контейнера.

Аналогично свойство left описывает, насколько далеко вправо (для положительных значений) или влево отстоит левый край поля позиционируемого элемента относительно левого края блока-контейнера. Положительные значения будут сдвигать край поля позиционируемого элемента вправо, а отрицательные значения - влево.

Смотрим на примере. Берём один контейнер (box1), даём ему абсолютное позиционирование, красную рамку в 2px и позиционирует его относительно окна браузера.

<?php
#box1 {
width:150px;
height:150px;
position:absolute;
border:2px solid red;
top:200px;
left:60%;
}

Далее в box1 помещаем box2, но у него уже будет относительное позиционирование, то есть, он будет внутри box1 и позиционироваться будет относительно сторон box1.

<?php
#box2 {
width:25px;
height:25px;
positionrelative;
border:2px solid  green;
top:20%;
left:20%;
}

Теперь находим box1 на мониторе ниже на 200px; относительно верха вашего браузера, и на 60% левее левой стороны вашего браузера.
html-код должен быть таким:

<?php
<div id="box1">
<
div id="box2"></div>
</
div>

Текущая категория

ПОЛЕЗНЫЕ ССЫЛКИ: