CSS Positioning — это одна из тех функций CSS, которая существует уже довольно давно, но до сих пор активно используется. Это отличный навык, который необходимо освоить, если вы собираетесь работать в Интернете. В этой статье мы рассмотрим свойство Position в CSS, его многочисленные значения и то, как все они функционируют.
Что такое свойство CSS position?
Свойство CSS position определяет, как элементы располагаются в HTML-документе.
Термины top, right, bottom и left используются в сочетании со свойством CSS position. Важно помнить, что если вы используете CSS positioning, ваши элементы всегда будут позиционироваться с помощью четырех ключевых слов top, right, bottom и left position. Вы всегда будете работать с этими четырьмя ключевыми словами, независимо от того, используете ли вы em, rem, px или любую другую единицу измерения CSS. Также важно помнить, что при использовании позиционирования CSS вы всегда смещаетесь относительно ключевого слова, которое вы используете. Давайте рассмотрим этот простой пример, чтобы лучше понять, что означает смещение в CSS-позиционировании.
.box-1{
position:relative;
top:100px;
}
Как вы видите, здесь мы использовали ключевое слово top, и это означает, что наш бокс будет смещен или отодвинут от верхнего края на основании значения, присвоенного свойству top. На этом рисунке наш бокс сместился на 100px вниз от верхнего края.
Значения позиционирования CSS
На рисунке выше видно, что положительные значения (+) направлены внутрь, а отрицательные (-) — наружу. Это означает, что позиционированные элементы с положительными значениями будут смещаться внутрь, а отрицательные значения будут смещаться или выдвигаться наружу.
Нормальный поток в CSS
В HTML и CSS существует порядок расположения элементов, как и в реальном мире, где существуют системы и процедуры, следующие определенному порядку или процессу. Эта последовательность называется нормальным потоком в CSS. До внесения каких-либо изменений в этот макет блочные и инлайн-элементы отображаются на странице в соответствии с нормальным потоком или макетом потока. Согласно спецификации CSS 2.1
Блоки в нормальном потоке принадлежат к контексту форматирования, который может быть блочным или инлайн, но не обоими одновременно. Блочные блоки участвуют в контексте форматирования блоков. Инлайн-блоки участвуют в контексте форматирования строк.
Проще говоря, порядок, в котором элементы появляются или укладываются сверху вниз без каких-либо изменений позиций элементов, известен как «нормальный поток» документа.
Существует пять основных типов свойств позиции CSS, которые вы должны знать:
1.Статический
2.относительный
3.Абсолютный
4.Фиксированный
5.Sticky.
Чтобы лучше понять, как они работают и когда их использовать, давайте рассмотрим каждый из них на примерах.
Позиция: Статическая
Это положение по умолчанию для всех элементов HTML в HTML-документе. Это означает, что позиция элемента будет установлена в static, даже если вы не объявите ее в CSS. Помните, что статическая позиция эквивалентна тому, что свойство position вообще не указывается. На все элементы, позиционированные static, не влияют свойства top, right, bottom и left, используемые при позиционировании элементов в CSS.
В данном примере будем использовать свойство position:static.
.main{
position:static;
top:30px;
right:30px;
background:red;
padding: 15px;
}
Как мы видим, свойство position:static не оказывает никакого влияния на элемент, которому было задано статическое положение.
Позиция: Относительное
Относительное позиционирование помогает нам перемещать или позиционировать наши элементы из исходного положения в любое место, где мы хотим его видеть. В отличие от элементов, позиционированных статично, на элементы, позиционированные относительно, влияют свойства top, right, bottom, left и z-index. Относительное позиционирование не удаляет элементы из потока документа. Относительно позиционированные элементы не изменяют визуально поток документа. Они просто визуально перемещаются, а другие элементы появляются там, где они должны появляться в обычном потоке документа.
Используя ту же иллюстрацию выше, мы изменим свойство position элемента .main на relative position, чтобы помочь нам понять, как работает относительное позиционирование.
.main{
position:relative;
top:20px;
right:30px;
background:red;
padding: 15px;
}
Обратите внимание, что свойства right и top теперь влияют на положение элемента. Также обратите внимание, что элемент остается в нормальном потоке документа, а смещение применяется относительно него самого. Обратите на это внимание, когда мы будем переходить к другим значениям.
Положение: Абсолютная
По сравнению с относительно позиционированными элементами, абсолютно позиционированные элементы позиционируются по-другому. Абсолютно позиционированные элементы размещаются по отношению к ближайшему содержащемуся или родительскому элементу. В отличие от относительно позиционированных элементов, которые позиционируются относительно самих себя, позиция ближайшего контейнера или родительского элемента служит основой для позиционирования абсолютно позиционированных элементов. Поэтому при использовании абсолютного позиционирования родительский элемент и дочерний элемент постоянно находятся в игре. Элемент, к которому будет применено position:absolute, является дочерним элементом. Следует помнить, что при абсолютном позиционировании родительский элемент всегда задействован.
Давайте вернемся к нашему примеру. В этом случае мы изменим положение главного элемента на position: absolute. Мы также зададим его родительскому элементу div относительную позицию, чтобы он не позиционировался относительно элемента html.
div{
position:relative;
border:10px solid blue;
padding:10px;
}
.main{
position:absolute;
bottom:70px;
right:40px;
background:red;
padding: 15px;
}
Обратите внимание, что для элемента не было создано никакого пространства в документе. Другой элемент сразу же повел себя так, как будто элемент .main никогда не существовал в потоке документа. Теперь элемент позиционируется относительно родительского элемента div.
Позиция:фиксированная
Аналогично абсолютным позиционированным элементам существуют фиксированные позиционированные элементы. Они также исключены из естественного потока документа. Они всегда позиционируются относительно элемента html, в отличие от элементов, которые позиционируются абсолютно.
Следует помнить, что прокрутка не влияет на фиксированные позиционированные элементы. На экране они всегда остаются на одном и том же месте.
html{
height:800px;
}
div{
border:10px solid blue;
padding:10px;
}
.main{
position:fixed;
bottom:80px;
left:80px;
background:red;
padding: 15px;
}
.child{
background:green;
padding:15px;
}
В данном случае .main позиционирован fixed. Попробуйте прокрутить, чтобы увидеть, что элемент закрепился на экране.
Перейдем к последнему значению.
Position:Sticky
position: sticky объединяет position: fixed и position: relative. До определенной точки прокрутки он ведет себя как элемент с относительным позиционированием; после этого он ведет себя как элемент с фиксированным позиционированием. Не волнуйтесь, если вы не понимаете, что это значит; приведенный ниже пример разъяснит вам это.
div{
position:relative;
border:10px solid blue;
padding:10px;
}
.main{
position:sticky;
top:100px;
background:red;
padding: 15px;
}
Прокрутите вкладку результата, чтобы увидеть результат. Вы видите, что он действует как относительный элемент, пока не достигнет определенной точки на экране, top: 100px, а затем он попадает туда, как фиксированный элемент.
Заключение
Теперь мы понимаем, что такое позиционирование CSS. Я надеялся, что этот пост будет полезен для вас. Не стесняйтесь экспериментировать с кодепенами, если вы не до конца их понимаете. Чтобы увидеть влияние, попробуйте поэкспериментировать с различными значениями. А еще лучше, попробуйте использовать свойство position для работы над сайд-проектом. Не забывайте присылать свои отзывы; я буду рад услышать ваши мысли.
Я открыт для связи в Twitter