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

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

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

Видеоурок

Расположить блоки на сайте можно несколькими способами. 


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


Пример реализации:

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

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

Загрузка...

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

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

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

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

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

Изучение HTML5 от нуля до гуру!
21 урок
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Изучение препроцессора SASS / SCSS
7 уроков
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Комментарии для сайта Cackle