Позиционирование и использование свойства Float

Самый большой вопрос, который снова и снова задают себе все, кто пользуется CSS - это "Как мне поставить этот дурацкий элемент именно туда, куда я хочу?!". Обычно ответ лежит в использовании свойства float и/или атрибутов позиционирования в комбинации с марджинами. Необходимо развивать мысленную модель (mental model) того, что происходит на странице, когда вы применяете к элементам Float или используете различные типы позиционирования.

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

Пункты для размышления

• Что такое DOM?
• Как размещаются элементы внутри DOM по умолчанию?
• Как переопределить позиционирование элемента с использованием атрибута position?
• Когда вы можете использовать атрибуты top, left, right и bottom?
• Какая разница между float и position?
• Какой элемент ведет себя как родительский по отношению к плавающему элементу?
• Какая разница между float: left и float: right?
• Что произойдет, если у вас есть набор плавающих элементов, при этом они расположены друг за другом, и вы уменьшаете размер окна браузера?
• Какова практическая разница между относительным (relative) и абсолютным (absolute) позиционированием?
• Какой элемент ведет себя как родительский по отношению к асолютно или относительно позиционированному элементу?
• Как можно построить сетку из 20х20 блоков на странице с помощью использования свойства float? С помощью списков?
• Для чего могут пригодиться отрицатильные марджины?

Задание

1. Прочитайте о CSS-свойстве float на сайте A List Apart
2. Прочитайте о позиционировании в CSS на сайте A List Apart
3. Поиграйте с Уроком по позиционированию - виджетом от BarelyFitz Designs, чтобы увидеть разницу между различными схемами позиционирования.
4. Прочитайте о свойстве float и позиционировании на htmlbook на русском.

Дополнительные ресурсы

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

• Абсолютное горизонтальное и вертикальное позиционирование в CSS от Smashing Magazine - это отличный ресурс, который наверняка пригодится, когда вас начнут волновать самые мелкие детали позиционирование элементов.
• Документация по CSS Float
• Документация по CSS Position