CSS: Позиционирование элементов

Включено в курс

Чему вы научитесь

• Управлять потоком документа, понимая, как работает браузер.
• Применять на практике все виды позиционирования HTML-элементов.
• Создавать интерактивные страницы, понимая саму суть верстки.

Описание

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

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

1. Основы современной верстки
2. Основы верстки контента

Программа курса

• 1

  Введение

  Знакомимся с целями и задачами курса

  теория
• 2

  Поток документа

  Выясняем, как браузеры отображают HTML и что такое «нормальный поток документа»

  теория

  тесты

• 3

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

  Учимся использовать относительное позиционирование

  теория

  тесты

  упражнение

• 4

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

  Выясняем, как выдернуть элемент из нормального потока

  теория

  тесты

  упражнение

• 5

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

  Поговорим о связи абсолютного и относительного позиционирования

  теория

  тесты

  упражнение

• 6

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

  Учимся позиционировать элемент относительно самого браузера

  теория

  тесты

  упражнение

• 7

  Плавающие элементы

  Поговорим о плавающих элементах и их особенностях

  теория

  тесты

  упражнение

• 8

  Наложение элементов

  Поговорим о наложении элементов, связи позиционирования и наложения

  теория

  тесты

  упражнение

• 9

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже