Понимание свойства CSS Position с практическими примерами

Вы хотите улучшить свои навыки дизайна и повысить удобство пользования вашим сайтом? Это проще, если вы хорошо знаете различные методы CSS для позиционирования элементов. Вы можете создать удивительную веб-страницу, имея базовое представление о веб-дизайне. Но основная проблема возникает, когда ваш веб-проект становится более детализированным, особенно если он требует сложного выравнивания элементов на странице.

К счастью, вы можете улучшить функциональность вашего сайта и ускорить рабочий процесс с помощью правильного позиционирования CSS. Давайте изучим различные свойства позиционирования CSS и рассмотрим различные макеты, которые вы можете использовать для создания современной веб-страницы.


Что такое свойство CSS position?


Свойство CSS position определяет положение элемента. Вы можете управлять расположением элемента с помощью свойств left, right, top, bottom и z-index. Хотя для создания симметричных сайтов можно использовать CSS Flexbox или CSS Grid, свойства position помогают создавать асимметричные сайты, отделяя каждый элемент от других элементов.

Иными словами, свойство CSS position позволяет элементам свободно перемещаться в документе.

Синтаксис свойства CSS position следующий:

position: value;

Вот пять значений, которые может принимать свойство position:

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

NOTE: Вы можете позиционировать элементы с помощью свойств left, right, top и bottom. Но эти свойства ведут себя по-разному, в зависимости от значения position.


Статическое позиционирование в CSS


Static - это положение по умолчанию для элементов HTML. Давайте рассмотрим несколько примеров HTML, чтобы понять это:

CSS Position PropertyChild 01Child 02Child 03

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

.utility-flex {display: flex;justify-content: center;align-items: center;}.parent_container {background: rgb(255, 187, 98);padding: 10px;width: 600px;height: 400px;}.child_1,.child_2,.child_3 {font-family: Lucida Sans, Lucida Sans Regular, Lucida Grande, Lucida Sans Unicode, Geneva, Verdana, sans-serif;font-weight: 600;background: #e961ee;border: 5px solid rgb(255, 255, 255);width: 300px;height: 100px;color: rgb(238, 238, 238);border-radius: 5px;margin: 5px;}

Сейчас добавим position: static ко второму дочернему элементу со свойствами bottom и right.

.child_2 {position: static;bottom: 40px;справа: 50px;border: 8px solid purple;}

Вот результат:

Как видите, свойство border применяется, но нет никакой разницы в позиционировании второго ребенка. Если вы не примените свойство CSS position, оно примет значение по умолчанию static. Это позиционирует элемент в соответствии со стандартным потоком страницы. Любой элемент со статическим положением будет игнорировать свойства left, right, top, bottom и z-index.


Относительное позиционирование в CSS


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

Изменим значение позиции второго дочернего элемента со статического на относительное с теми же свойствами top и bottom, что и раньше.

.child_2 {position: relative;bottom: 40px;right: 50px;border: 8px solid purple;}

Вот результат:

Как вы видите, второй ребенок смещен на 40px снизу (к верху) и на 50 px справа (к левому).


Абсолютное позиционирование в CSS


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

Обратите внимание, что элемент с абсолютным позиционированием позиционируется относительно своего ближайшего позиционированного (нестатического) предка. Если позиционированного предка нет, он позиционируется относительно начального содержащего блока.

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

.parent_container {background: rgb(255, 187, 98);padding: 10px;width: 600px;height: 400px;margin: auto;}.child_2 {position: absolute;bottom: 190px;справа: 500px;border: 8px solid purple;}

Вот результат:

В этом втором примере родительский контейнер имеет нестатическое положение:

.parent_container {background: rgb(255, 187, 98);padding: 10px;width: 600px;height: 400px;margin: auto;position: relative;}.child_2 {position: absolute;bottom: 20px;right: 150px;border: 8px solid purple;}

Дочерний элемент теперь позиционирован относительно своего контейнера:

.

CSS Фиксированное позиционирование


Элемент с фиксированным положением также удаляется из нормального потока документа. Для этого элемента не создается место во всем макете страницы. Он позиционируется относительно начального содержащего блока, заданного видовым экраном (за исключением случаев, когда у любого из его предков свойство filter, transform или perspective установлено в любое другое значение, кроме none). Свойства top, left, right и bottom определяют окончательное положение элемента.

Давайте изменим наш существующий пример, добавив больше дочерних элементов. Ранее мы зафиксировали высоту родительского контейнера. Давайте уберем ее и установим flex-direction: column, чтобы наш гибкий контейнер был достаточно большим для прокрутки вниз и визуализации результата. Теперь добавьте свойство fixed position для второго дочернего элемента, как показано ниже:

.utility-flex {display: flex;flex-direction: column;justify-content: center;align-items: center;}.parent_container {background: rgb(255, 187, 98);padding: 10px;width: 600px;/* height: 400px; */margin: auto;/* position: relative; */}.child_2 {position: fixed;bottom: 300px;справа: 100px;border: 8px solid purple;}

Вот результат:

Таким образом, прокрутка вообще не влияет на положение второго ребенка. Его положение фиксировано относительно начального содержащего блока, заданного видовым экраном. Иногда прокручивающиеся элементы могут вызывать проблемы с производительностью и доступностью. Вы можете сделать доступный сайт, используя семантический HTML и CSS.


Липкое позиционирование CSS


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

Вы можете указать порог с помощью свойств left, right, top и bottom. Без порога элемент будет вести себя так, как будто у него относительное позиционирование.

Давайте установим для второго дочернего элемента позицию sticky с верхним порогом:

.child_2 {position: sticky;top: 0px;border: 8px solid purple;}

Вот результат:

Как видите, при прокрутке второй ребенок ведет себя так же, как и другие дети. Но когда он достигает порогового значения (top: 0px), он ведет себя как неподвижный и покидает нормальный поток документа. Вы можете заставить навигационную панель прилипнуть к заголовку с помощью липкого позиционирования.


Заключение


Свойство CSS position - это продвинутый навык веб-дизайна. Оно требует некоторого обучения, но все, что вам нужно сделать, это поиграть с различными значениями, результатами и исключениями. Помните, что ничто не может превзойти практику, когда речь идет о создании потрясающего веб-дизайна. Поэтому продолжайте практиковаться, и вы станете лучше. Счастливого кодинга!

Ваше имя: *
Ваш e-mail: *
Код: Кликните на изображение чтобы обновить код, если он неразборчив
Введите код: