Абсолютное позиционирование внутри абсолютного положения

Question

У меня 3 div элементов.

1-й div больше (обтекание) и имеет position:relative;

2nd div позиционируется абсолютно относительно 1-го div относительного позиционирования (и включено в 1st div)

3rd div содержится во 2nd div и также имеет абсолютное позиционирование.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

Почему 3-я div позиция является абсолютной по отношению к 2-й div (которая также является абсолютной позицией по отношению к 1-му div), а не к 1-й div, которая имеет относительную позицию?

Поскольку 3-е div является абсолютным позиционированием по отношению к абсолютному 2-му div.

Answer 1

Поскольку position: absolute сбрасывает относительную позицию для детей так же, как position: relative.

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

Answer 2

И position:relative, и position:absolute устанавливают содержащие элементы в качестве позиционирующих предков.

Если вам нужно позиционировать div 3 на основе div 1, то сделайте его прямым потомком div 1.

Обратите внимание, что position: relative означает, что элемент расположен относительно его естественной позиции, а position: absolute означает, что элемент расположен относительно его first position:relative или position:absolute предка .

Answer 3

Статическая позиция: статическая позиция - это способ отображения элемента в обычном потоке вашего HTML-файла, если позиция вообще не указана.

Внимание: topСвойства, right, bottom и left НЕ ВЛИЯЮТ НА СТАТИЧЕСКИ ПОЗИЦИОННЫЙ ЭЛЕМЕНТ.

Положение относительно: позиционирование элемента с относительным значением сохраняет элемент (иместа, которое он занимает) в обычном потоке вашего HTML-файла.

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

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

Абсолютная позиция: применение абсолютного значения позиции к элементу удаляет его из нормального потока.Когда вы перемещаете элемент с абсолютным позиционированием, его опорная точка - это верхняя / левая часть его ближайшего содержащего элемента, у которого есть позиция, объявленная не статично, также называемая контекстом ближайшего позиционирования.Таким образом, если не существует содержащего элемента с положением, отличным от статического, он будет расположен в верхнем левом углу элемента body.

В вашем случае ближайший содержащий контейнер 3-й это 2nd.

Answer 4

Еще один уточняющий ответ.

Ваш текущий сценарий таков:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

И вы как бы боретесь с ним.HTML, просто сделайте это:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

Answer 5

Причина, по которой 3-й элемент div абсолютно позиционируется по отношению ко 2-му элементу div, заключается в том, что, как объясняется в спецификации CSS здесь , в том, что "родительский" элемент (лучше сказать: содержащий блок)) абсолютно позиционированный элемент - это не обязательно его непосредственный родительский элемент, а скорее его непосредственный позиционированный элемент, т. е. любой элемент, положение которого установлено на что угодно, кроме static например position: relative/absolute/fixed/sticky;

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

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

Надеюсь, это поможет.