Абсолютное позиционирование
Представим окно браузера как систему координат:
Принципы 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>
Демонстрация примера