Как использовать свойство position в CSS для выравнивания элементов?

Опубликовано: 5 Октября, 2022

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

Подход: свойство position используется для установки положения элемента. Мы можем выравнивать элементы, используя свойство position с некоторым вспомогательным свойством left | право | топ | bottom , который используется для установки координат элемента. Чтобы выровнять элементы с помощью свойства position , мы устанавливаем позицию элемента, а затем с помощью вспомогательного свойства устанавливаем координаты элемента.

Синтаксис:

position: static | relative | absolute | fixed | sticky

Пример 1: Ниже приведена реализация описанного выше подхода, который выравнивает элемент по центру.

Выход:

  • Перед позиционированием:
  • После позиционирования:

Пример 2: Абсолют position принимает позицию в соответствии со страницей, потому что абсолютная позиция принимает страницу в качестве родителя. Чтобы сделать это в соответствии с родителем, мы должны добавить относительно родительского класса.

Выход:

  • Перед позиционированием:
  • После позиционирования: