Абсолютное позиционирование в рамках абсолютного позиционирования

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

Предположим, у вас есть элемент-контейнер (1-й div) с относительным позиционированием (position:relative), который позволяет вам для позиционирования дочерних элементов относительно своей собственной позиции. Внутри этого контейнера у вас есть абсолютно позиционированный элемент (2-й div) и третий абсолютно позиционированный элемент (3-й div), вложенный во 2-й div.

В этом сценарии вы можете ожидать, что 3-й div будет позиционирован абсолютно относительно 1-го div, хотя 2-й div также абсолютно позиционирован. Однако это не так.

Понимание иерархии позиционирования

Причина такого поведения заключается в том, как работает абсолютное позиционирование. Когда элементу присваивается абсолютное позиционирование, он удаляется из нормального потока документа и вместо этого позиционируется относительно своего ближайшего позиционированного предка. В этом случае 2-й элемент div является ближайшим позиционированным предком 3-го элемента управления, независимо от того, имеет ли 1-й элемент управления относительное позиционирование.

Это означает, что абсолютная позиция 3-го элемента управления рассчитывается относительно 2-го элемента управления. позиция div, а не позиция 1-го div. В результате третий элемент div будет абсолютно позиционирован внутри второго, а не первого элемента.

Техника альтернативного позиционирования

Если вы хотите, чтобы третий элемент был абсолютно позиционирован относительно 1-го div, вам нужно сделать его прямым дочерним элементом 1-го div. Это позволит третьему элементу div наследовать абсолютную позицию первого элемента управления и позиционироваться соответствующим образом.

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