JSFiddle - React, Tailwind, and code Playground

by Shanti S

HTML

<div id="block-1"></div>

<div id="parent-block">
    <div id="block-2"></div>
    <button>Move block</button>
</div>

CSS

#block-1 {
    position: absolute;
    border: 1px solid #f00;
    width: 150px;
    height: 150px;
    right: 0;
    top: 0;
}
#parent-block {
    position: absolute;
    border: 1px solid #00f;
    width: 150px;
    height: 150px;
    left: 0;
    bottom: 0;
}
#block-2 {
    position: absolute;
    z-index: 9999;
    background-color: #0f0;
    width: 50px;
    height: 50px;
}
button {
    position: absolute;
    top: 50px;
}

JavaScript

var velocity = 1500;

$("button").on("click", function(){
    var pos = $("#parent-block").offset();
    $("body").prepend($("#block-2").detach());
    var move = $("#block-2").css({
        "position": "absolute",
        "z-index": "9999",
        "top": pos.top,
        "left": pos.left
    });
    var block1 = $("#block-1").offset();
    move.animate({
        "top": block1.top + 10,
        "left": block1.left + 10
    }, velocity, function(){
        move.css({"top":"10","left":"10"});
        $("#block-1").prepend(move);
    });
});