Когда веб-дизайнеры кодируют сайт HTML и CSS, встроенными методами позиционирования элементов на экране являются «абсолютное», «фиксированное» и «относительное» позиционирование. Каждый метод предоставляет свой особый набор преимуществ и недостатков, однако бывают случаи, когда макет требует лучшего из всех миров. Чтобы справиться с этими случаями, существует очень полезная гибридная техника, названная абсолютно относительным позиционированием.

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

позиция: абсолютная;
топ: 0px;
Слева направо: 0px;

Аналогично абсолютному позиционированию, существует другая версия, называемая фиксированным позиционированием, которая позиционирует элемент по координате относительно экрана пользователя. Это наиболее очевидно, когда пользователь прокручивает. Абсолютно позиционированные элементы прокручиваются вместе со страницей, а фиксированные элементы остаются «закрепленными» в окне браузера, независимо от того, где пользователь прокручивает.

В отличие от абсолютного позиционирования, относительное позиционирование отображает элемент в потоке документа. По сути, относительное позиционирование аналогично использованию Microsoft Word. Когда пользователь вводит абзац, он может вставить изображение, а затем ввести другой абзац текста. При относительном позиционировании, если они добавляют дополнительный текст в начало, изображение и следующий абзац будут перемещаться вниз. Напротив, при абсолютном позиционировании изображение и последующие абзацы останутся фиксированными и перетекут друг на друга.

Относительное позиционирование обычно используется для большей части содержимого веб-сайта, в то время как абсолютное позиционирование используется для графики, которая должна накладываться друг на друга. Тем не менее, бывают случаи, когда дизайнер захочет создать сложную графику, которая все еще течет вместе со страницей.

Решение этой проблемы - «абсолютно относительное» позиционирование. Чтобы использовать эту технику, разработчику необходимо создать внешний элемент DIV с относительным позиционированием, а затем создать абсолютный элемент внутри:

<div style = "position: относительный;">
<div style = "position: absolute; top: 0px; left: 0px;"> Является ли это абсолютно относительным или относительно абсолютным? </ div>
</ DIV>

В этом примере абсолютно позиционированный элемент будет перетекать с остальным окружающим контентом.

Есть одна заключительная оговорка, которая часто полезна для этой техники. Хотя относительный DIV будет отображаться вместе с остальной частью страницы, он не будет иметь представления о размере своего содержимого. В результате это может привести к частичному совпадению с содержимым, следующим непосредственно за DIV. Решение состоит в том, чтобы добавить «чистый» DIV после относительного DIV, чтобы автоматически дать элементам необходимую высоту:

<div style = "position: относительный;">
<div style = "position: absolute; top: 0px; left: 0px;"> Является ли это абсолютно относительным или относительно абсолютным? </ div>
</ DIV>
<div style = "clear: both;"> </ div>

Использование этих методов поможет сохранить простоту и элегантность CSS и HTML, одновременно допуская сложные стили и эффекты страниц. Благодаря своей относительной простоте использования и кросс-браузерной совместимости этот метод является одним из наиболее мощных передовых методов CSS.

Автор Андрей Пальчевский

об авторе
Эндрю Пальчевски - генеральный директор apHarmony, чикагской компании по разработке программного обеспечения. Он имеет степень магистра по вычислительной технике в Университете Иллинойса в Урбана-Шампейн и имеет более чем десятилетний опыт управления разработкой программных проектов.
Google+