15. Позиционирование блоков
Технология CSS позволяет размещать что угодно, где угодно.
Нужно просто указать координаты блока.
Под блоком понимаем не только <div>, но и заголовки, параграфы, рисунки, списки, в общем, все, что является блоковой моделью. Это помогает создать действительно уникальный дизайн.
Рассмотрим две основные модели позиционирования:
Абсолютное позиционирование (POSITION:ABSOLUTE;)
Относительное позиционирование (POSITION:RELATIVE; )
Абсолютное
позиционирование
(POSITION:ABSOLUTE;)
Обычно для позиционирования применяют именно этот тип. В технологии CSS, свойство позиционирования обозначается как POSITION, а чтобы указать, что это позиционирование абсолютное, пишут значение ABSOLUTE. Затем используя ключевые слова top, right, bottom, left, указывают необходимые координаты, которые отсчитываются от краев окна браузера.
Посмотрите на рисунок ниже.
Огромный плюс абсолютного позиционирования в том, что бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется. Рассмотрим, обычный документ с одним изображением, и обтекающим его текстом.
А
теперь, спозиционируем изображение,
для чего создадим класс, и присвоим его
изображению. Код
класса,
выглядит
примерно
так:
.smile{ border: 1px solid red; position:absolute; top:100px; right:100px; }
Применим класс к изображению <img class="smile"> .
изображение удалилось из того места, где оно было(вместо изображения теперь там текст), и переместилось соответственно указанным координатам. Обычно указываются только две координаты, т.е. привязка идет к любому из углов документа.
Вот еще пример стиля:
|
.smile{ position:absolute; bottom:300px; left:100px; }
|
|
Если необходимо зафиксировать блок, т.е. чтобы он не прокручивался вместе с основным содержимым, т.е. не скролился, то необходимо указать значение FIXED.
|
.smile{ position:fixed; bottom:300px; left:100px; }
|
|
Относительное
позиционирование (POSITION:RELATIVE;
)
При относительном позиционировании бокс смещается, но его прежнее место ничего не заполняет. Обозначается в как POSITION: RELATIVE;
Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока.
Вот пример простого документа с текстом и рисунком:
А вот пример, как будет выглядеть этот же документ, если изображение спозиционировать относительно.
|
Css код: .smile{ border:1px solid red; position:relative; top:200px; left:100px; }
|
|
Т.е., прежнее место ничем не занимается, а координаты отсчитываются от первоначального положения блока.
16: Плавающие блоки(свойство float)
С помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Большинство современных сайтов строятся именно по блочному принципу.
Итак, плавающие блоки в CSS определяются свойством float.
Свойства
FLOAT
Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.
left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.
right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.
none - блок не перемещается (значение по умолчанию).
Например, как будут располагаться по умолчанию, три квадратных блока, со стороной в 200 пикселей.
html код :
<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <div class="box3">Третий блок</div>
|
CSS код :
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; }
|
|
Как видите, по умолчанию каждый следующий блок, находится под предыдущим.
Используя свойство float можно сделать так, чтобы каждый блок всплывал влево, т.е. это будет выглядеть так:
|
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } |
|
Вот как будет выглядеть, если блоки будут всплывать вправо:
|
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; } |
|
Классический пример применения - это когда надо сделать, чтобы текст выводился в колонках. Пусть колонки будет три.
|
.column1 { float:left; width: 33%; } .column2 { float:left; width: 33%; } .column3 { float:left; width: 33%; } |
|
В html-коде просто заключим необходимый текст в соответствующие колонки, тегами DIV
<div class="column1"> <p>There is one universal truth in website making: To make a websitet...</p> </div> <div class="column2"> <p> If you're like the vast majority of people thinking ...</p> </div> <div class="column3"> <p>There is one universal truth in website...</p> </div>
Говоря о плавающих блоках, необходимо упомянуть также о свойстве CLEAR - специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.
left - блок должен размещаться ниже всех левосторонних плавающих блоков.
right - блок должен размещаться ниже всех правосторонних плавающих блоков.
both - блок должен размещаться ниже всех плавающих блоков.
none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.
Допустим имеется два плавающих влево блока (float:left;), которые обтекает текст.
Если заключить весь текст в блок, и придать ему свойство CLEAR:BOTH т.е. чтобы он размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков текстом.
html-код
<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <div class="box3"> <p>There is one universal truth in website...</p> </div>
CSS-часть
|
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box3 { clear:both; } |
|
Заметьте, что в блоках может находиться что угодно(картинки, списки, текст и др.)
Пример, когда один блок располагается под другим, и оба блока обтекаются текстом.
html-код
<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <p>………текст...</p>
|
.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; clear:both; } |
|
Можно использовать плавающие блоки для создания каркаса сайта.