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

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

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

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

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

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

Ответ 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 */

Ответ 5

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

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

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

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