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

У меня 3 divэлемента.

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

2-й divпозиционируется абсолютно по отношению к 1-му divотносительному позиционированию (и входит в 1-й div)

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

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

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

Потому что третий div- это абсолютное позиционирование по отношению к абсолютному позиционированию второго div.

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

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

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

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

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

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

Важно: top, right, bottomи leftсвойства не влияет на то Статичаском позиционируемый элемент.

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

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

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

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

В вашем случае ближайший к третьему контейнеру контейнер - второй.

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

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

#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 */

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

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

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

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

На случай, если кто-то все еще ищет ответ на этот вопрос.

Мне удалось добиться этого результата, добавив clear: both;стиль к первому абсолютно позиционированному div, который сбросил дочерний элемент и позволил ему использовать собственное absoluteпозиционирование.