Данный цикл статей по-идее должен был появиться раньше, чем блочная верстка сайта вообще и всякие трюки в CSS в частности. Но с другой стороны, начинать рассказ о блочной верстке с позиционирования всетки скучно. :)
А сейчас меня попросили рассказать именно о позиционировании, его видах и пр. Что я с удовольствием и делаю.
Итак, позиционирование. В двух словах — это взаимное расположение элементов (блоков, картинок, и т.д.) на странице сайта. В блочной верстке веб страниц мы использовали статическое (static) позиционирование, то есть элементы в нем размещаются в соответствии с нормальным потоком — слева-направо в границах заданной области. Этот вид позиционирования задан по-умолчанию и именно так воспринимается всеми браузерами.
Кроме данного вида есть еще три вида позиционирования: относительное (relative), абсолютное (absolute), и фиксированное (fixed).
Статическое позиционирование.
Как уже было сказано, статическое позиционирование подразумевает нормальный поток контента в заданных границах. По-умолчанию такие границы определяет тэг body. Грубо говоря, элементы на экране монитора будут поочередно располагаться слева-направо "сколько влезет", а затем автоматом переноситься на следующую "строку". Например, у нас 17" монитор с выставленными настройками изображения в 1024х768 пикселей. Имеем на странице сайта 4 прямоугольных элемента (пусть это будут картинки), каждый шириной в 300 пикселей. В случае статического позиционирования получим следующее: три элемента будут расположены по-порядку слева-направо в самом верху экрана, а четвертый разместится под первым. Это и есть нормальный поток. Хоть у нас справа и осталось немного места (1024-(300+300+300) = 124), но четвертый элемент не стал там "лепиться" и прятаться за край экрана, а просто перенесся ниже, как бы на следующую строчку.
Плюсы такого позиционирования очевидны: можно не заморачиваться со сложной разметкой и располагать элементы на странице словно складывая по-порядку кубики в коробку. Причем задать границы можно и самостоятельно. Например, поместив весь контент в некий контейнер, который затем можно двигать относительно главного тэга body. Именно так мы и поступали, когда занимались блочной версткой. Кроме того, взаимное расположение самих элементов здесь также легко регулировать такими свойствами как margin и padding. Некоторые верстальщики поступают совсем просто — набросают на страницу элементов, словно художник эскиз, а потом уже в листе стилей подгоняют эти самые марджинги и пэддинги. :)
Но есть в этой бочке миода и своя ложка дегтя, а именно несовместимость некоторых браузеров. Вернее, неодинаковое отображение в разных браузерах одной и той же веб-страницы. Например, IE считает, что поля — есть что-то внешнее по отношению к элементу и добавляет оные к размерам все того же элемента. И очень часто выходит так, что Опера (браузер такой, для тех кто не в танке) отображает страницу нормально, а в IE какой-нить элемент перескочил на следующую строку, потому что поля приплюсовались к элементу и сделали его шире, чем должен быть. В этом случае остается либо играться размерами блоков, заведомо соглашаясь, что в различных браузерах страничка будет отображаться не совсем одинаково, либо писать в листе стилей отдельные хаки — специальные правила для конкретных браузеров (или даже отдельный лист стилей). Если посмотрите код страниц некоторых блогов, то там вверху, в метатэгах, можете увидеть нечто вроде:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Подобный код показывает компутеру, что ежели у него в наличии только Internet Explorer, то велком нафик читать лист стилей ie.css, а не что-либо иное.
Остается сказать еще парочку слов о таких свойствах, как float и clear. Если вы, например, располагаете в нормальном потоке просто картинки, то они без всяких заморочек встают одна за другой слева-направо, пока не достигнут правой границы, а потом начнут заполнять следующий ряд ниже. Но если вы попытаетесь таким же макаром расположить ряд блоков, взятых в тэги div, то каждый из них будет расположен один под другим, а не в ряд. Почему так? Дело в том, что "дивы" весьма гордые создания и считают, что у каждого должна быть собственная единоличная строка. Чтобы обойти это ограничение и обмануть их, придумали специальное свойство float (обтекание). Рассмотрим следующий набор правил:
#leftcol {
width: 150px;
float: left;
margin: 0 5px 0 0;
}
Здесь задан некий блок, названный leftcol (типо левая колонка), у которого ширина 150 пикселей, отступы сверху, снизу и слева по нулям, справа в 5 пикселей и, самое интересное, float (обтекание) слева. Это означает, что сам блок leftcol будет расположен слева, а следующий за ним будет словно бы "обтекать" его справа. Тут нет никакой ошибки! Чтобы было проще запомнить, то left — значит сам блок слева, а все обтекает его справа; right — соответственно наоборот. :) Так мы расположим оба блока на одной горизонтальной линии.
Другим интересным свойством является clear (очистка). Оно выполняет противоположную функцию. Например, мы хотим расположить парочку симпатишных картинок на странице сайта. Причем расположить их именно одну под другой, а не в ряд. Но так как ширина обоих по 300 пикселей, а ширина экрана все 1024, то они упорно встают рядышком на одной линии. Тогда мы просто берем и пишем следующее правило в листе стилей:
.clearfloat {
clear: both;
}
А в нужном месте на странице (сразу же за первой картинкой) вписываем вот такой код:
<div class="clearfloat"></div>
В правиле мы указали имя класса clearfloat (на самом деле это не критично и обозвать можно было хоть .keep_out_of_my_ass) и свойству clear задали значение both, то есть очистка с обоих сторон. Это обозначает, что после данного элемента на странице не должно быть более ничего. И, таким образом, браузер не станет лепить вторую картинку справа от первой, а перенесет ее на следующую строку.
На этом все. В следующий раз поговорим об абсолютном позиционировании и опять же о том, какая сво... этот IE, потому как и тут он сумел наделать кучу.
