Язык CSS
Позиционирование блоков.
В HTML для позиционирования элементов на странице мы использовали таблицы. У таблиц есть как преимущества (легкость использования, одинаковое отображение браузерами), так и недостатки (объемный, нечитабельный код, нелогичность верстки и т.д.).
В CSS для позиционирования элементов используются блоки (div-ы). Код при этом становится компактным, логичным и легко изменяемым. К недостаткам блочной верстки можно отнести неодинаковую поддержку браузерами, поэтому приходится писать кроссбраузерный код (т.е. код, который отображается разными браузерами почти одинаково).
Вспомним такой шаблон html-документа, который создавался с помощью таблицы:
Теперь давайте посмотрим, как можно сверстать такую страницу средствами CSS.
Если визуально разделить нашу страницу на прямоугольные блоки, то мы получим четыре блока: шапка сайта, меню, контент и низ сайта. Таким образом, мы имеем четыре div-а.
Напишем html-код страницы с четырьмя div-ами (и соответствующим содержимым) и каждому дадим соответствующий идентификатор (id): "header", "menu", "content", "bottom" (задать соответствующий шрифт и размер шрифта).
Теперь, на странице style.css зададим ширину, высоту, фон и цвет текста каждого блока. Сейчас наша страница в браузере (в уменьшенном варианте) выглядит так:
Такое позиционирование элементов называется позиционированием в нормальном потоке.
Это значит, что все элементы отображаются в окне браузера сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом в html-коде. По своей сути нормальный поток ничем не отличается от позиционирования элементов в HTML. И для верстки такой страницы без CSS, нам пришлось бы использовать таблицу, за неимением других вариантов.
В CSS же нам предоставляются и другие схемы позиционирования:
абсолютное позиционирование ;
относительное позиционирование;
плавающая блоковая модель.
Для определения схемы позиционирования используется свойство position, оно может принимать четыре значения, соответствующие выбранной схеме позиционирования:
static - блок позиционируется в нормальном потоке. Это значение по умолчанию;
relative - относительное позиционирование (относительно нормального потока);
absolute - абсолютное позиционирование;
fixed - фиксированное позиционирование (фиксируется относительно области просмотра).
Сегодня мы рассмотрим абсолютное позиционирование, остальные схемы будем рассматривать в следующих уроках.
Абсолютное позиционирование
При этой схеме позиционирования расположение блока на странице не зависит от того, в каком месте html-кода расположен этот блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре свойства:
left - указывает на сколько надо сместить блок относительно левого края окна;
right - указывает на сколько надо сместить блок относительно правого края окна;
top - указывает на сколько надо сместить блок относительно верхнего края окна;
bottom - указывает на сколько надо сместить блок относительно нижнего края окна.
Вернемся к нашему примеру. Наши блоки header, menu и bottom позиционируются в нормальном потоке, поэтому свойство position для них задавать не надо. А вот блок content нужно расположить в другом месте, поэтому для него мы укажем свойство position:absolute и зададим смещение: от левого края окна на ширину блока menu, а от верхнего края окна на высоту блока header:
position:absolute; left:450px; top:100px;
Наш блок расположился не совсем так, как ожидалось. Это от того, что мы не учли один нюанс: у браузеров есть свои, встроенные таблицы стилей. И, если мы не задали какое-либо свойство, то используется свойство по умолчанию. Так, по умолчанию для элемента body определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для body свойство margin:0px, т.е. явно указать размер полей (в нашем примере - их отсутствие).
Добавим это в таблицу стилей:
body{ margin:0px; }
и учтем также размеры отступов и рамок в блоках.
Теперь наша страница выглядит так, как мы и ожидали. В принципе размеры смещения можно было задать и для каждого блока, иногда это необходимо.
Главное, что необходимо запомнить: при абсолютном позиционировании следует задать для блока свойство position:absolute и свойства смещения относительно "родительского" элемента.
В нашем примере родительским элементом для div-ов было окно браузера, но может быть и по-другому.
Практическое задание:
добавить блок новостей на нашу страницу и разместить его внутри блока контента. Тогда в таблице стилей смещение надо указывать относительно блока content.
Результат в браузере:
При абсолютном позиционировании, чтобы не запутаться с величинами смещения, определите сначала "родителя" и помните, что смещение происходит относительно "родителя".
В следующий раз будем изучать другие схемы позиционирования.
Источники:
| ← Язык CSS. Свойства - margin, padding, border. | Язык CSS. Относительное позиционирование. → |