Вытеснить элемент из потока
 

Здравствуйте.
Подскажите пожалуйста.
Есть основной елемент, который отпозиционирован абсолютно и его высота(top) меняется, то есть он едет вниз-вверх. Внутри него есть другой элемент, который так же отпозиционирован абсолютно, но у него есть координаты слева и сверху.
Вопрос: как сделать так, чтоб изменения внешнего элемента, то есть его изменения координат сверху(top) не отоюражались на внутренем елементе, чтоб несмотря на то, что основной элемент меняет свое положение, - внутренний оставался постоянно на заданных координатах?

<style>
    #main { position: absolute; width: 400px; }
    #elem { background: red;  height: 100px; position: absolute; top: 300px; width: 100px; }
</style>

<div id="main"> <!-- основной элемент, координаты высоты которого постоянно меняются -->
    <div id="elem">Внутренний элемент</div> <!-- внутренний элемент, координаты слева и сверху, которого остаются неизменными -->
</div>

Подскажите пожалуйста, очень нужна помощь! :(

Либо выносить внутренний элемент наружу, либо убирать absolute у внешнего:

<div id="wraper" style="position: absolute; left: 0; top: 0; right: 0;">
	<div id="main" style="width: 100px; height: 100px; margin: 100px 0 0 100px; background: #99f;">
		<div id="inner" style="position: absolute; top: 100px; right: 100px; width: 100px; height: 100px; background: #9f9;"></div>
	</div>
</div>

Вроде больше никак.

Может есть варианты сделать это джаваскриптом?

вот отсюда можно начать:
Измерения окна, документа и элементов

уже смотрел, не подходит

в общем вот:
http://xopc-m.ua/test/
Как видите, вначале все хорошо, на как только мы перетаскиваем любую карточку в пустой слот, а потом снова начанаем прокручивать слайдер, то он выталкивает вставленную карточку.
Структуру я менять не могу — вся логика прошита уже в джаваскрипет и тогда прийдется снова все переделывать