http://cssmake.ru/component/content/article/6/109
Существует два подхода к позиционированию элементов на странице с помощью css: плавающий метод (float) и абсолютное позиционирование (position:absolute). У обоих методов есть свои плюсы и минусы. Я и моя команда создали новый подход к позиционировании элементов на странице, в котором используется все лучшее из обоих методов. После недолгих эксперемнтов мы решили опубликовать наш метод, чтоб получить отзывы на него и, возможно, улучшить. Этот метод я назвал "Нестандартное абсолютное позиционирование", который имитирует присутствие колонки.
Зачем нужен еще один метод для css расположения?
Многие сайты имеют колоночную структуру с шапкой (header) и подвалом (footer). Если для колонок использовать абсолютное позиционирование, то расположить подвал сайта под колонками становится практически невозможным, если предполагается, что высота колонок может увеличится. Если же использовать плавающие колонки, подвал сайта может просто "наехать" на колонки. Это связано с тем, что для IE проблематично обрабатывать ширину плавающих колонок.Наш случай был еще более сложным: наша команда занимается разработкой WYSIWYG генератора, что позволяет пользователю произвольно перетаскивать элементы на странице. Нам необходимо было позволить пользователям создавать красивые формы, которые б не использовали чрезмерно статические расположения и позволить им выравнивать колонки так, как им необходимо.
Давайте предположим, что нам необходимо создать форму, в которой почтовый индекс и название города помещалось бы на одной линии, потому чтто они семантически связаны. Чтоб добится этого, мы попытались использовать плавающее расположение (float). Используя этот метод, мы должны были выровнять ширину, границы, внешние отступы и/или внутренние отступы, чтоб прикрепить область с названием города жестко на горизонтальной линии. Это было проблематично, потому что, если ширина области должна была изменится или мы б решили изменить расстояние между полями, нам бы пришлось передвигать все поля в нашей форме. К тому же плавающее расположение очень чувствительно к малейшему изменению параметров, что сделало бы практически невозможным динамическия изменения в форме.
После этого мы попытались использовать абсолютное позиционирование. Это нам позволило более точно контролировать расположение полей в форме. Но у абсолютно позиционированных элементов не существует высоты, из-за чего все расположение других элементов разрушается.
Дугой подход
Наконец, мы нашли решение, основанное на поиске способов вычислить левый внешний отступ с фиксированной позиции, в зависимости от ширины правого элемента.- Исправления ошибки в IE6
- Дает дополнительную гибкость и позволяет использовать внутренние отступы (padding)
- Позволяет нам использовть position: overflow и не ломает раположение
width:100%;
display:block;
position:relative;
.item {
float:left;
left:100%;;
width:30%;
Преймущества
С помощью метода нестандартного позиционирования можно выровнять каждый элемент по определенному положению в структуре (с помощью абсолютного позиционированния), но при этом элементы продолжают находится в обычном потоке, что позволяет им взаимодейстовать сдругими элементами и имеют свойства такие же, как и у элементов в обычном потоке. Высота таких элементов будет всегда зависить от содержания или как это будет описано в css. Ширина этих элементов будет всегда равна 100% независимо от того, сколько будет колонок в одном ряду. Кроме этого можно спокойно использовать внутренние (padding) и внешние (margin) отступы, чтоб устанавливать отступы между элементами. Это является большим плюсом, так как в данном случае не требуются специальные хаки для IE6, без которых структура будет разваливаться.Еще одно преймущество этого метода заключается в том, что если ширина содержания контейнера больше чем указана ширина контейнера, блок не сдвигается вправо, а остается на месте. При обычном использовании плавающих элементов, в таком случае контейнер, находящийся внизу, сдвинулся бы вправо. Конечно содержимое контейнеров может наложится, если к примеру используется overflow: hidden, но мы думаем, что это все таки лучше, чем если б расположение разваливалось.
Честно, я был немного удивлен, что этот метод работает так хорошо, и при этом используется HTML 4.01 и CSS 2.1. Также этот метод работает как в проэктах с фиксированной шириной, так и эластичной.
Недостатки
Метод нестандартного позиционирования может использоватся как в фиксированной структуре, так и эластичной, но, если Вы для своего проэкта используется фиксированную ширину колонок, этот метод не оптимальный для Вас.
Еще следует отметить, что данный метод будет работать не для каждой ситуации. Если Вы хотите выровнять элементы по левому краю, то Вам необходимо использовать еденицы для измерения ширины такие же как и для вычисления общей ширины страницы. Например, если у Вас ширина страницы 800px, левая колонка 2em, то Вы не сможете вычислить внешний отступ слева, так как никогда не будете знать скольким емам равно 800px.
Исходя из вышеперечисленного, можно сделать вывод, что способ нестандартного центрирования не проверен во множестве ситуаций и нет гарантий, что он буде корректно работать во всех случаях. Поэтому этот метод следует считать эксперемнтальным.
Метод не требует никаких хаков для браузера IE
Разработанный нами метод не требует никаких дополнительных хаков и работает во всех современных браузерах (Safari, Opera, Firefox, IE7), а также в IE6. Метод очень устойчив при росте высоты и расположение не ломается если ширина картинки больше чем ширина колонки.Я очень доволен этим методом, но он еще требует дополнительных экспериментов.
оригинал: Faux Absolute Positioning
Комментариев нет:
Отправить комментарий