При создании веб-страницы мы сталкиваемся с множеством элементов, и каждый из этих элементов должен быть расположен на веб-странице. Для этого в CSS есть свойство position. Свойство position используется для выравнивания различных элементов на HTML-странице. Свойство position играет важную роль в создании высококачественных веб-страниц.
Свойство CSS position определяет положение элемента в документе. Свойство position в сочетании с другими свойствами, такими как top, left, bottom и right, играет важную роль в оформлении веб-страницы.
Свойство position может принимать пять значений. Это
- Статический
- Относительное
- Абсолютное
- Фиксированная
- Липкий
Статический
Static — это значение по умолчанию для свойства position. В статическом положении элементы позиционируются в соответствии с нормальным течением страницы. Левый, верхний, правый, нижний и Z-индекс не влияют на элемент, расположенный статично.
Синтаксис:
selector{
position: static;
}
Относительный
Относительно позиционированные элементы также остаются в нормальном потоке страницы. Но в отличие от статических, свойства left, right, top, bottom и Z-index влияют на элемент, позиционированный относительно.
Синтаксис:
selector{
position: relative;
top: value;
left: value;
right: value;
bottom: value;
z-index: value;
}
Абсолютное
Абсолютно позиционированные элементы не следуют нормальному потоку страницы. Они позиционируются в соответствии с ближайшим относительно позиционированным родителем. Свойства left, right, top, bottom и Z-index элементу задаются в соответствии с родительским элементом, содержащим абсолютно позиционируемый элемент.
Синтаксис:
parent{
position: relative;
}
селектор{
position: absolute;
top: value;
left: value;
right: value;
bottom: value;
z-index: value;
}
Fixed
Фиксированный элемент не следует нормальному потоку документа и позиционирует себя относительно тега. Такой элемент всегда прилипает к экрану. Свойства left, right, top, bottom и Z-index влияют на фиксированное положение элемента.
Синтаксис:
selector{
position: fixed;
top: value;
left: value;
right: value;
bottom: value;
z-index: value;
}
Липкий
Элемент positioned sticky — это комбинация position: fixed и position: relative. Элемент positioned sticky действует как элемент, позиционированный относительно до определенной точки на экране. После этого элемент начинает действовать как элемент с фиксированной позицией.
Помните, что для того, чтобы стать лучше в CSS, нужна постоянная практика. Поэтому продолжайте практиковаться, и вы будете совершенствоваться.