Как расположить блоки друг под другом css

Позиционирование

• absolute (абсолютное позиционирование),
• relative (относительное позиционирование) ,
• fixed (фиксированное позиционирование),
• static (статическое позиционирование, применяется по умолчанию).

Для позиционирования блока можно воспользоваться свойствами top, bottom, left, right с определенными значениями.

Абсолютное позиционирование

Абсолютное позиционирование задается стилевым указанием position:absolute .

• Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы.
• Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину).
• Остаются на том же месте, где были, если не заданы значения свойств top, left, right, bottom.
• Если свойства left, top, right и bottom заданы, то они задают расположение элемента относительно некоторой системы координат. При этом начало координат находится в верхнем левом углу прямого предка, при условии, что он также позиционирован (абсолютно или относительно). Если родитель не позиционирован, то берется его родитель. Если все предки не имеют указаний position, то в качестве точки отсчета принимается левый верхний угол экранного образа тега BODY, то есть левый верхний угол документа.Элементы выводятся в указанном месте, перекрывая при этом другие элементы страницы. Порядок следования кодов абсолютно позиционируемых элементов становится важным, если они начинают перекрывать друг друга: выше оказывается тот элемент, код которого идет позже.
• Абсолютное позиционирование изменяет поведение не только блочных элементов, но и строчных. Если строчный элемент спозиционирован абсолютно, то он ведет себя точно так же, как и абсолютно спозиционированный блочный. Например, такому строчному элементу можно задавать размеры с помощью width и height.

В следующем примере абсолютно позиционированы две картинки. В коде для каждой из них указаны координаты, но для одной началом координат является начало документа, а для другой — начало блока. Откройте Пример 2, попробуйте изменить размеры окна браузера. Проанализируйте код данной web-страницы.

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

Относительное позиционирование задается стилевым указанием position:relative . Блоки с относительным позиционированием позиционируются относительно нормального потока, то есть они не выпадают из нормального потока, как блоки с абсолютным позиционированием.

За начало координат принимается та точка, куда элемент был бы размещен без позиционирования. Алгоритм относительного позиционирования можно представить следующим образом: сначала браузер размещает элемент на странице, выполняя обычное форматирование, а затем, по указаниям top, left, right, bottom смещает его на заданные значения.

Откройте Пример 3, измените размер окна и убедитесь, что картинка перемещается по экрану вслед за точкой отсчета — началом абзаца, которому принадлежит тег IMG в коде документа. Начало абзаца меняет свое положение тогда, когда предшествующий заголовок записывается в одну или две экранные строки. Проанализируйте код данной web-страницы.

Фиксированное позиционирование

Фиксированное позиционирование задается стилевым указанием position:fixed . Фиксированное позиционирование позволяет закрепить блок в любом месте страницы. В отличие от абсолютного позиционирования, фиксированные элементы позиционируются только относительно окна браузера.

Откройте Пример 4, прокрутите содержимое страницы, положение навигационного меню должно остаться прежним. Проанализируйте код данной web-страницы.

Z-индекс

Стилевое свойство z-index позволяет отойти от плоского представления документа на экране. Его значением является целое число, номер плоскости, в которой будет размещаться элемент (вместе со своими потомками). Основной текст имеет нулевой уровень (z-index:0). Положительный z-индекс размещает элементы над основным текстом, отрицательный — под ним. Из двух плоскостей размещения та расположена выше, у которой z-индекс больше.

Если у элементов один уровень (задан явно или не задан вовсе), то тот из них будет располагаться выше, чей HTML-код идет позже.

Cвойство z-index работает для элементов, у которых position задано как absolute, fixed или relative.

В Примере 5 представлены три блока с абсолютным позиционированием, каждый из которых перекрывает остальные. Проанализируйте код данной web-страницы.

Плавающее размещение

Плавающее размещение задается стилевым указанием float . Свойство определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Возможные значения: none — без обтекания; left — выравнивание по левому краю, обтекание по правому краю; right — выравнивание по правому краю, обтекание по левому краю.

В Примере 6 показано плавающее размещение изображения, в результате получен эффект обтекания изображения текстом.

Очистка плавающего размещения служит для того, чтобы размещение элемента оставалось плавающим, однако его не окружали другие элементы. Свойство clear принимает следующие значения: left, right, both .

В Примере 7 показано очищенное плавающее размещение изображений, таким образом изображения были размещены в два столбца.

Задание

• Используя позиционирование, создайте объемную надпись из обычного текста (без картинок).
• Используя плавающее размещение, измените расположение текста на одной из страниц: выведите текст в три колонки (как в газете). Таблицы при этом не используйте!