1. приклади
2. переваги методу
3. Підводні камені

Як відомо, існує 2 популярних способу верстки на основі блоків div: плаваюча модель (float) і абсолютне позиціонування (absolute).

Кожен з них має свої плюси і мінуси. Eric Sol разом зі своєю командою розробили новий спосіб позиціонування в CSS під назвою « faux absolute positioning »- імітація абсолютного позиціонування.

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

Завдання команди Еріка була набагато складніше:

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

Жоден зі стандартних способів позиціонування не допоміг реалізувати це завдання.
Тоді хлопці стали експериментувати і зробили, можна сказати, відкриття:

У підсумку, ми вирішили спробувати спосіб, заснований на обчисленні лівого негативного відступу щодо елемента з фіксованою позицією, на відміну від розрахунку величини його правого краю щодо попереднього елемента. Зробити це вийшло за допомогою комбінації властивостей: 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 коду, то цей причіпний елемент буде зміщений вправо на величину рівну різниці в ширині між першим елементом і робочою областю.

Оскільки техніка ця нова і ще невипробувані користувачами, то, напевно, отроют ще й інші її секрети, як позитивні, так і негативні. Але наведені приклади вже доводять, що нова техніка практично заміщає нелюбимі нами таблиці і прекрасно підходить для шаблонів на сітці.