Позиционирование элементов, пошаговый разбор свойства 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, уже в новых частях этого разбора с примерами и задачками. Кстати, подписывайтесь на мой тг канал, там вы ничего не пропустите и будете видеть мои статьи самыми первыми!