Абсолютно позиционированный div не работает

Question

У меня есть анимация css, которая заставляет div перейти под другой div. DIV 1 идет под DIV 2. Если я сделаю DIV 2 абсолютно позиционированным, страница сломается. Но если я не сделаю DIV 2 абсолютно позиционированным, DIV 1 не пойдет под него, купите пребывание в верхней части div.

Вы можете проверить это живой here

Вот как это выглядит без правильного содержания абсолютного позиционирования.

Если вы наведите указатель мыши на карту, вы увидите переход.

Любые полезные решения избавления от этого? Я бы очень признателен.

Заранее спасибо.

Answer 1

Вот почему это не сработает, ваш родительский div должен иметь положение для дочернего деления.

.div1, .div2{ 
position:relative; 
} 
.div3{ 
position:absolute; 
} 

Посмотрите здесь: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Answer 2

сделать Div 2 быть position: relative так, что он остается в потоке. См How to make div's percentage width relative to parent div and not viewport

Из этого ответа:

Задание position:relative; или position:absolute; на узле означает, что он будет использоваться в качестве ссылки для абсолютно позиционируемых элементов в пределах его http://jsfiddle.net/E5eEk/1/

Answer 3

мне удалось это сделать работы:

#content { 
    position: relative; 
} 

.info { 
z-index: 0; 
    position: relative; 
} 

Answer 4

Чтобы сделать #content, чтобы быть верхним слоем, добавьте z-index с более высоким значением с другим div.

Примите к сведению, z-index не работает, если вы не установите ДИВ position:absolute или position: relative

#content { 
    position: relative; 
    z-index: 3; 
}