neosdios

Зачем дубли..?
Положи элемент в обёртку. И оставь одну пустую обёртку вне интерфейса, на переднем плане.

Процесс анимации:
1. Скриптом вычисляем ширину-высоту обёртки, пока элемент в ней есть. Присваиваем обёртке полученные значения ширины и высоты. Теперь если элемент из неё выдернуть, она не схлопнется.
2. Вычисляем абсолютные значения отступа от левого и верхнего края элемента до края интерфейса. Позиционируем независимую обёртку по полученным значениям left и top. (интерфейс тоже в обёртке должен лежать, вся движуха внутри неё будет происходить от её краёв)
3. Блок с элементом вынимаем из его родной обёртки и кладём в обёртку на переднем плане. По идее, визуально он не должен и шелохнуться, ведь абсолютная позиция по отступам должна совпадать.
4. Перемещаем переднюю обёртку с элементом в центр экрана, а на интерфейсе проявляем тёмный overflow чтобы приглушить его а элемент визуально вынести на первый план и привести внимание к нему.

Условно говоря, исходно такое:

<div class="interface_wrapper"> 
	<div id="interface">
		...
		<div class="element_wrapper">
			<div class="element" id="element001">
			...
			</div>
		</div>
		...
	</div>
	<div class="element_wrapper" id="onfront_wrapper">
	
	</div>
</div>

Превратить условно в такое:

<div class="interface_wrapper"> 
	<div id="interface" class="overflow">
		...
		<div class="element_wrapper freezed" style="width: Xpx; height: Ypx;">

		</div>
		...
	</div>
	<div class="element_wrapper" id="onfront_wrapper" style="left: XXpx; top: YYpx;">
		<div class="element" id="element001">
		...
		</div>
	</div>
</div>

И всё на своих местах. Ну и все анимации перемещений лучше предварительно просчитав скриптом, реализовать на css анимациях. Так меньше нагрузка на проц.