36. Статическое и относительное позиционирование css

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

Содержание

Введение

Удивительный мир прямоугольников

Статическое позиционирование

Компоновка блочных боксов

Компоновка строковых боксов

Относительное позиционирование

Много-столбцовая компоновка

Создание столбцов

Обход особенностей Internet Explorer

Другие применения относительного позиционирования

Заключение

Контрольные вопросы

Введение

В этой статье мы начинаем подробное рассмотрение того, как можно использовать CSS для позиционирования элементов HTML в любом требуемом месте на странице, используя свойство CSS position и другие связанные свойства.

Свойство position в CSS имеет четыре законных значения (в дополнение к вездесущему inherit ): static, relative, absolute и fixed. Эти значения имеют существенное влияние на то, как изображается элемент. Два значения, static и relative, тесно связаны, и мы подробно рассмотрим их в этой статье. Значения absolute и fixed также тесно связаны, и будут рассмотрены в следующей статье этой серии.

Удивительный мир прямоугольников

Поговорим немного о боксах CSS и HTML, которые были рассмотрены в статье 35 о плавающих элементах и очистке. Документ HTML состоит из ряда элементов, перемешанных с символьными данными (текст). Когда такой документ изображается на экране компьютера или печатается на бумаге, эти элементы генерируют прямоугольные боксы. Также как элементы HTML делятся на блочные и строковые элементы, боксы в CSS являются по сути либо блочными боксами, либо строковыми боксами. По умолчанию встроенная таблица стилей агента пользователя в браузере заставляет элементы HTML блочного уровня, такие как p и div, генерировать блочные боксы, в то время как строковые элементы, такие как strong и span, генерируют строковые боксы. Можно управлять типом генерируемого бокса, используя свойство display.

Сгенерированные элементами в документе боксы размещаются согласно четко определенному в спецификации CSS2.1 множеству правил. Эти правила написаны для относительно небольшого числа людей, которые пишут программное обеспечение браузеров, чтобы они знали, как работает CSS, хотя не для тех, кто создает Web-страницы для заработка - или как хобби. Именно поэтому существует весь этот курс! Как результат, спецификация может быть немного трудна для восприятия. В этой статье делается попытка объяснить основы таким образом, который лучше подходит для Web-дизайнеров и разработчиков.

Статическое позиционирование

На самом деле это неправильное название. Боксы со свойством position:static вообще не "позиционируются" в смысле CSS. Они просто выкладываются в том порядке, в котором они появляются в разметке, и занимают столько места, сколько им надо - это поведение по умолчанию, которое применяется, когда к коду HTML вообще не применяется никакой CSS.

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