#10 - Позиционирование блоков в CSS

#10 - Позиционирование блоков в CSS

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

Видеоурок

Расположить блоки на сайте можно несколькими способами. Первый способ это просто указать значение float, после чего блок уже будет позиционироваться с какой-либо стороны, а все дополнительные элементы будут обтекать его, например:
div {
   float: left;
}
Помимо этого, существует другое свойство - position. Оно может принимать несколько значений:
  • fixed - фиксируется в одном месте экрана и при скролле никуда не исчезает;
  • relative - относительное позиционирование (можно задать отступы от того места, где сейчас находиться сам объект);
  • absolute - абсолютное позиционирование (можно задать глобальные отступы).

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

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Современная вёрстка адаптивного веб-сайта
Изучение HTML5 от нуля до гуру!
21 урок
Верстка сайта на HTML5 и CSS3
13 уроков
Создание сайта с нуля | Полноценная верстка сайта
11 уроков
Изучение препроцессора SASS / SCSS
7 уроков
Создание адаптивного сайта
4 урока