CSS3

Изучение CSS/CSS3 от нуля до гуру!

15 уроков 45 заданий Справочник Компилятор

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

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


HTML5CSS3

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

Видео урок:

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

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

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

Загрузка...

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

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

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

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


HTML5CSS3

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