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

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

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

В CSS доступно пять различных типов свойств позиции:

  • Фиксированный: любой элемент HTML с позицией: фиксированный свойство будет расположено относительно области просмотра. Элемент с фиксированным позиционированием позволяет ему оставаться в той же позиции, даже когда мы прокручиваем страницу. Мы можем установить положение элемента, используя верхнее , правое , нижнее и левое.
  • Статический: этот метод позиционирования установлен по умолчанию. Если мы не указываем метод позиционирования для какого-либо элемента, элемент имеет метод position: static по умолчанию. Определив static, верхнее, правое, нижнее и левое не будут иметь никакого контроля над элементом. Элемент будет позиционироваться в соответствии с обычным потоком страницы.
  • Relative: Элемент с position: relative позиционируется относительно других элементов, которые находятся над ним. Если мы установим его top , right , bottom или left , другие элементы не будут заполнять пробел, оставленный этим элементом. Элемент с его положением, установленным как относительный, и при настройке с помощью top , bottom , left и right будет расположен относительно его исходного положения.
  • Абсолют: Элемент с position: absolute будет позиционироваться относительно своего ближайшего нестатического предка. Позиционирование этого элемента не зависит от его братьев и сестер или элементов, которые находятся на том же уровне.
  • Sticky: Элемент с позицией: sticky и top: 0 играет роль между фиксированной и относительной в зависимости от позиции, в которой он находится. Если элемент размещен в середине документа, то когда пользователь прокручивает документ, липкий элемент начинает прокручиваться, пока не коснется верха. Когда он коснется вершины, он будет зафиксирован на этом месте, несмотря на дальнейшую прокрутку. Мы можем прикрепить элемент внизу с помощью свойства bottom.

Какова позиция элемента относительно его контейнера?

Проще говоря, это означает, что родительский элемент устанавливается в относительное положение, а дочерний элемент — в абсолютное. Сумма относительной и абсолютной позиции установит дочерний элемент относительно его родителя, или мы также можем сказать, что позиция элемента относительно его контейнера.

Синтаксис:

position: fixed | static | relative | absolute | sticky;

Пример 1. В приведенном ниже коде мы будем использовать относительные и абсолютные свойства, чтобы продемонстрировать решение этой проблемы.

Выход:

Пример 2. В приведенном ниже коде мы будем использовать относительные и абсолютные свойства, чтобы продемонстрировать решение этой проблемы.

Выход: