Позиционирование в CSS

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

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

Свойство position может принимать пять значений. Это

  1. Статический
  2. Относительное
  3. Абсолютное
  4. Фиксированная
  5. Липкий

Статический

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

Оцените статью
devanswers.ru
Добавить комментарий