Позиционирование элементов, пошаговый разбор свойства position в CSS. Часть 1

Сегодня поговорим о position и его значениях.

Если в начале своего пути освоение вёрстки у вас тоже была или ещё есть проблема в понимании, а какое значение есть и в какой ситуации его использовать, то эта статья точно для вас.Начнём с теории, потом перейдем к практике и задачке. И снова я ссылаясь на htmlbook, расскажу и дополню определения.

Свойство position - устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Используется в основном для расположения одной картинки на другую или же фиксации элемента при scroll.

Свойство имеет 5 значений.

absolute - указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom.

fixed - значение привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.Положение элемента задается свойствами left, top, right и bottom. Но при скролле страницы положение будет неизменно.

relative - положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

static - элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.

sticky - это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается и нужно на странице именно в этом месте.

А теперь приступим к практике. Сначала показываю Вам картинку и задание, а потом мы подумаем и разберем как это сделать?

Итак, задание, нам нужно спозиционировать маленький фиолетовый квадрат посередине большого зеленого квадрата, который будет размещен также посередине нашей страницы, вот тут нам как раз и понадобится свойство position, далее покажу как его нужно применить.

Рассмотрим решение в коде:

Сначала мы создаем контейнер с блоком в HTML и теперь будем его стилизовать.

Важно! Указать в CSS и понять какой блок является родителем дочернего элемента, в нашем случае это. item, относительно чего должен позиционироваться этот элемент? Если мы не указали свойство position у родителя, то он позиционирует этот элемент относительно всего тела body. Часто этот момент упускается и дочерний элемент оказывает вне интересующего нас блока.

Тут у родителя .container указываем position: relative; у дочернего position: absolute; и только после этого двигаем дочерний элемент значениями top и
right.

Еще один важный момент, не нужно указывать одновременно top, bottom, right и left, их нужно использовать только для тех сторон, которые нас интересует.

Таким образом, применив position родителю и дочернему элементу, мы с помощью значений position расположили фиолетовый квадрат как требовалось в задании.

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

#frontenddeveloper #html #css #javascript #карьера #разработчики #программирование #itтехнологии #it #frontend