CSS position: относительное и абсолютное позиционирование

CSS- свойство position определяет положение элемента на веб-странице. Существует пару типов позиционирования: static, relative, absolute, fixed, sticky, initial и inherit. Разберемся, что означают данные типы:

  • Static — это значение свойства по умолчанию. Элементы располагаются в том порядке, в котором они выводятся на веб-странице.
  • Relative — элемент позиционируется относительно стандартного положения.
  • Absolute — элемент позиционируется абсолютно по отношению к первому позиционированному родителю.
  • Fixed — элемент позиционируется относительно окна браузера.
  • Sticky — элемент позиционируется на основе позиции прокрутки посетителя.

Сейчас поговорим о двух наиболее часто используемых значениях свойства position — relative и absolute.

Что такое относительное позиционирование?

Когда вы устанавливаете положение относительно элемента, без добавления иных атрибутов позиционирования(top, bottom, right, left), ничего не произойдет. При добавлении дополнительной позиции, к примеру left: 20px, элемент переместится на 20 пикселей вправо от вашей обычной позиции. То есть, элемент смещается относительно себя самого. При этом иные элементы не будут затронуты.

position: relative; ограничивает область действия абсолютно позиционированных дочерних элементов. То есть, они могут быть абсолютно позиционированы только в пределах этого блока.

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

HTML

<div id="first_element">First element</div> <div id="second_element">Second element</div>

CSS

#first_element { position: relative; left: 30px; top: 70px; width: 500px; background-color: #fafafa; border: solid 3px #ff7347; font-size: 24px; text-align: center; } #second_element { position: relative; width: 500px; background-color: #fafafa; border: solid 3px #ff7347; font-size: 24px; text-align: center; }
CSS position: относительное и абсолютное позиционирование

Что такое абсолютное позиционирование?

Позиционирование выполняется относительно первого позиционированного родительского элемента. В случае, когда родительского элемента нет, позиционирование будет осуществляться непосредственно по отношению к элементу HTML(самой странице).

В следующем примере для родительского элемента задано относительное позиционирование. Сейчас, когда мы используем для дочернего элемента значение absolute, любое дополнительное позиционирование будет выполняться относительно родительского элемента. Дочерний элемент перемещается относительно вершины родительского элемента на 100 пикселей и правее родительского элемента на 40 пикселей.

HTML

<div id=”parent”> <div id=”child”></div></div>

CSS

#parent {   position: relative;   width: 500px;   height: 400px;   background-color: #fafafa;   border: solid 3px #9e70ba;   font-size: 24px;   text-align: center; } #child {   position: absolute;   right: 40px;   top: 100px;   width: 200px;   height: 200px;   background-color: #fafafa;   border: solid 3px #78e382;   font-size: 24px;   text-align: center; }
CSS position: относительное и абсолютное позиционирование

В данных примерах мы продемонстрировали различия между абсолютно и относительно позиционированными элементами. Надеемся, эта статья поможет вам в будущих проектах.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *