Как известно, существует 2 популярных способа верстки на основе блоков div: плавающая модель (float) и абсолютное позиционирование (absolute). Каждый из них имеет свои плюсы и минусы. Eric Sol вместе со своей командой разработали новый способ позиционирования в CSS под названием "faux absolute positioning" – имитация абсолютного позиционирования.

Большинство дизайнов имеют колоночную структуру, т.е. шапку, 2-3 колонки и подвал. Используя только абсолютное позиционирование невозможно задать правила для подвала, т.к. его положение напрямую зависит от контента. С плавающей моделью тоже возникают сложности: блоки просто разваливаются, если их суммарная ширина будет больше 100%.

Задача команды Эрика была намного сложнее:

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

Ни один из стандартных способов позиционирования не помог реализовать эту задачу.

Спонсор статьи: Срочное продвижение web ( веб ) сайта в сети интернет.
Хотите стать спонсором?

Тогда ребята стали экспериментировать и сделали, можно сказать, открытие:

В итоге, мы решили попробовать способ, основанный на вычислении левого отрицательного отступа относительно элемента с фиксированной позицией, в отличие от расчета величины его правого края относительно предыдущего элемента. Сделать это получилось с помощью комбинации свойств: position: relative, left: 100% и отрицательного значения margin-left.

Вначале необходимо сформировать сетку из строк и ячеек. Мы можем поместить любое количество ячеек в одной строке и любое количество строк в необходимом нам блоке:

<div id="canvas">
<div class="line">
<div class="item" id="item1">
<div class="sap-content">content here</div>
</div>
</div>
</div>

… и так далее. Каждый блок-ячейка имеет дополнительный внутренний блок с классом sap-content. Это сделано для того, чтобы:
- избежать баг отрисовки в IE6,
- управлять отступами внутри ячейки
- использовать свойства overflow (ячейки не будут разваливаться)

CSS код для наших элементов таков:

.line {
float: left;
width: 100%;
display: block;
position: relative;
}
.item {
position: relative;
float: left;
left: 100%;
}

Для позиционирования первого блока-ячейки нам нужно прописать отрицательное значение margin-left и установить ширину блока. Например:

#item1 { margin-left: -100%; width: 30%;}

Наглядно это можно изобразить так:

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

Примеры

Первый пример – 3х колоночный макет с фиксированным размером левой и правой колонок. Следует обратить внимание на следующие моменты:

1. Левая и правая колонки имеют ширину в пикселях. Поэтому, мы не можем высчитать левый отступ для центрального блока, т.к. не знаем ширину рабочей области в процентах, так же как и ширину колонок в процентах от рабочей области. Решение будет простым: установим для главного блока свойства: margin-left: -100% и width: 100% и добавим padding чтобы получить отступы от колонок.
2. Все 3 колонки отрисованы на одном уровне по оси Z, поэтому необходимо для левой и правой колонок прописать свойство z-index, например 100.
3. Отступы для левой и правой колонок добавлены к дополнительному внутреннему блоку sap-content, и как говорилось выше, это обеспечивает гибкость работы с ним.

Пример 2 включает 5 колонок, в котором рабочая область, все строки и ячейки имеют ширину в процентах. Добавление изображений, границ и отступов не влияет на отрисовку и позиционирование блоков.

Преимущества метода

Новый способ позиционирования позволяет нам располагать элементы на заранее отведенное для них место, так же как и при абсолютном позиционировании, но все элементы будут следовать в одном потоке, друг за другом. Имитация абсолютного позиционирования имеет множество преимуществ наравне с версткой обычными методами. Каждая строка в сетке всегда будет _той же высоты_ что и центральная часть или той, что определена стилями, и всегда будет иметь 100% ширины, независимо от того сколько ячеек задано в колонке. Кроме того, способ позволяет избежать образования промежутков между элементами – и это большой плюс, т.к. в IE приходилось применять для этого css-фильтры (хаки) в блочной модели.

Еще одним преимуществом является то, что эта техника «смягчает» недостатки плавающей модели. Когда содержимое блока шире чем сам блок, то он толкает следующий блок вправо, а не сбрасывает его вниз. Содержимое блока может быть даже намного больше своего родителя – это никак не скажется на структуру нашего макета. (в этом помогает правило overflow: hidden).
И самое главное – новая техника абсолютно валидна HTML 4.01 и CSS 2.1 и отрицательное значение margin-left одинаково воспринимается всеми браузерами! Больше никаких хаков! К тому же, модель подойдет как для дизайнов с фиксированной, так и 100% шириной, и позволяет работать с одинаковыми высотами колонок, при этом имеющих фиксированную либо % ширину. Имитация абсолютного позиционирования может даже использоваться рекурсивно, т.е. позволяет использовать ячейки как строки с новыми ячейками – как при верстке с использованием table.

Подводные камни

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

Кроме того, есть ситуации, в которых техника не будет работать. Если вы хотите расположить элементы друг за другом, вы не можете использовать единицы измерения, отличные от той, в которых указана ширина рабочей области, иначе вы просто не сможете рассчитать необходимый отрицательный отступ. Например, у вас есть рабочая область шириной 800px и вы хотите сделать левый отступ в 2em для вашей ячейки, но вы не рассчитаете значение отступа, т.к. не знаете сколько em в 800 пикселях.

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

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