html - Absolutely positioned div doesn't work -

i have css animation, makes div go under div. div 1 goes under div 2. if make div 2 absolutely positioned, page break in pieces. if don't make div 2 absolutely positioned, div 1 not go under it, buy stay @ top of div.

you can check out live here

this how looks without making right content absolutely positioned.

if hover mouse on map, see transition.

any helpful solutions of getting rid of this? appreciate.

thanks in advance.

that why don't work, parent div has have position child div position take effect.

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

take here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/