Абсолютное позиционирование

Представим окно браузера как систему координат:

Принципы CSS-позиционирования — в том, что вы можете расположить блок в системе координат где угодно. Скажем, мы хотим позиционировать заголовок. При использовании блоковой модели заголовок выглядит так:

Если мы хотим расположить его в 100 пикселах от верхней границы окна браузера и на 200 пикселов правее левой границы окна браузера, то мы должны написать такое правило:

 

h1 {

position: absolute;

top: 100px;

left: 200px;

}

 

Вот результат:

Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Положение блока задается при помощи свойств сдвига:

· left — смещение левого края блока относительно левого края контейнера;

· right — смещение правого края блока относительно правого края контейнера;

· top — смещение верхнего края блока относительно верхнего края контейнера;

· bottom — смещение нижнего края блока относительно нижнего края контейнера.

В качестве примера абсолютного позиционирования разместим 4 блока в углах документа:

 

#box1 {

position: absolute;

top: 50px;

left: 50px;

}

 

#box2 {

position: absolute;

top: 50px;

right: 50px;

}

 

#box3 {

position: absolute;

bottom: 50px;

right: 50px;

}

 

#box4 {

position: absolute;

bottom: 50px;

left: 50px;

}

 

Демонстрация примера

Плавающие блоки

Для того, чтобы в CSS реализовать «резиновую» вёрстку, были придуманы плавающие блоки. Их нельзя позиционировать с точностью до пикселя, как при абсолютном позиционировании. Они могут свободно перемещаться и «прижиматься» к краю своего контейнера. Подобным образом ведут себя рисунки в HTML, для которых задан атрибут align=.

Плавающие блоки в CSS определяются свойством float.

Свойство float

Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения:

· left — блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.

· right — блок перемещается вправо. Остальное содержимое документа будет выводиться вдоль левой стороны блока, начиная с самого верха.

· none — блок не перемещается (значение по умолчанию).

Рассмотрим пример. Допустим, вы пишете статью, и по ходу необходимо вставлять ремарки или делать комментарии. Поместим эти комментарии внутрь плавающего блока, а сам блок разместим рядом с нужным местом в статье.

Создадим такой блок, указав для него свойство float со значением left. Для плавающих блоков всегда надо явно указывать ширину, иначе блок растянется так, чтобы поместить в себя всё содержимое.

 

.comment { background-color: #CCCCFF;

border: 1px solid;

padding: 5px;

width: 250px;

Float: left

}

<DIV class="comment">
Текст внутри плавающего блока
</DIV>
<P>Текст, который будет обтекать блок</P>

Демонстрация примера

А что произойдет, если в HTML-коде разместить несколько одинаковых плавающих блоков? Рассмотрим такой пример кода:

<DIV class="comment">
Первый плавающий блок должен «прилипать» к левому краю контейнера.
</DIV>
<DIV class="comment">
Второй плавающий блок — «прилипнет» куда?
</DIV>
<P>... Фрагмент текста ...</P>

Демонстрация примера

Получается, что второй блок располагается правее первого, несмотря на то что также является левосторонним. Если же требуется изменить положение плавающего блока, то следует воспользоваться свойством clear — аналогом атрибута clear=.

Свойство clear

Данное свойство определяет, какие стороны плавающих блоков не могут соседствовать с другими плавающими блоками. Свойство может принимать следующие значения:

· left — блок должен размещаться ниже всех левосторонних плавающих блоков.

· right — блок должен размещаться ниже всех правосторонних плавающих блоков.

· right — блок должен размещаться ниже всех плавающих блоков.

· none — нет ограничений на размещение (значение по умолчанию).

<DIV class="comment">
Первый плавающий блок должен «прилипать» к левому краю контейнера.
</DIV>
<DIV class="comment" style="clear:left">
Второй плавающий блок — «прилипнет» куда?
</DIV>
<P>... Фрагмент текста ...</P>

Демонстрация примера

Из всего сказанного можно сделать вывод, что несколько плавающих блоков будут располагаться на одной линии, если их суммарная ширина будет меньше ширины контейнера или равна ей. Если в качестве контейнера рассмотреть окно браузера, то таким образом легко реализовать вёрстку в несколько колонок.

Создадим три плавающих левосторонниз блока, чтобы их суммарная ширина не превышала 100 % ширины окна браузера.

 

#block1 { background-color: #CCCCFF;

border: 1px solid;

padding: 5px;

width: 30%;

float: left }

#block2 { background-color: #FFCCCC;

border: 1px solid;

padding: 5px;

width: 30%;

float: left }

#block3 { background-color: #FFCC99;

border: 1px solid;

padding: 5px;

width: 30%;

float: left }

<DIV id="block1">
Первый плавающий блок должен «прилипать» к левому краю контейнера.
</DIV>
<DIV id="block2">
Второй плавающий блок должен выстроится с первым в одну линию.
</DIV>
<DIV id="block3">
Третий плавающий блок должен выстроится с двумя предыдущими в одну линию.
</DIV>

Демонстрация примера

Центрирование блока

При вёрстке в одну колонку, если она ýже окна браузера, её чаще всего центрируют. Однако центрирование в CSS не так просто реализовать, как кажется на первый взгляд. Свойство text-align: center, к примеру, должно центрировать содержимое блока, но не сам блок относительно контейнера.

В этом случае может помочь значение auto свойства margin. По спецификации CSS, для значения auto размеры полей вычисляются особым образом: если оба свойства margin-right и margin-left принимают значение auto, то их вычисляемые значения будут одинаковы. Что это означает? Когда левое и правое поля будут совпадать? Когда блок центрирован! Именно этого мы и добивались.

Пример — блок шириной 60 % ширины окна браузера, располагаемый по центру. Но при этом текст в блоке прижат к левому краю, а не центрирован.

 

#block { background-color: #CCCCFF;

border: 1px solid;

padding: 5px;

margin-right: auto;

margin-left: auto;

width: 60% }

<DIV id="block">
Отцентрирован блок, но не его содержимое.
<P>Причем ширина блока меняется, если менять ширину окна браузера.
</DIV>

Демонстрация примера