Pop an element out of the stream

Question

css

Hello.
Tell me please.
There is a main element that is absolutely positioned and its height (top) changes, that is, it goes up and down. Inside it there is another element that is also absolutely positioned, but it has left and top coordinates.
Question: how to make sure that changes in the outer element, that is, its changes in coordinates from above (top), are not displayed on the inner element, so that despite the fact that the main element changes its position, the inner element remains constantly at the given coordinates? you can use css3, if of course you need to Tell me please, I really need help! :(
#main { position: absolute; width: 400px; }
#elem { background: red; height: 100px; position: absolute; top: 300px; width: 100px; }

<див id="main">
<див id="elem">Внутренний элемент</див>
</див>


Answer 1

You need to take out (duplicate) from #leftPanel to #game when dropping cardPile using js, while positioning absolutely. When you click on close on cardPile, take copyCard position from leftPanel and “fly” cardPile there, after that add (remove duplicate) to #leftPanel again

Answer 2

#main { position: static; width: 400px; } /* меняем margin-top */
#elem { background: red; height: 100px; position: absolute; top: 300px; width: 100px; } /* остается, как было */