JSFiddle - React, Tailwind, and code Playground

by TrySpace

HTML

<div id="parental">
  Parent
  <div id="childish">
    Child
  </div>
</div>
<button id="klikker"> POP </button>
<button id="klakker"> PIP </button>

CSS

#parental{
   position: absolute;
   left: 150px;
   width: 66%;
    height: 66%;
   border: 1px solid black;
   webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
	      box-sizing: border-box;
}

#childish{
  position: relative;
  left: 33%;
  top: 33%;
  width: 100px;
  border: 1px solid black;
  webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

JavaScript

offer = $("#childish").offset();
offerP = $("#childish").position();

console.log(offer);
console.log(offerP);

//var x = x - offer.left - $(document.body).css( "border-left" );
//var y = y - offer.top + $(document.body).css( "border-top" );


$("#klikker").on("click", function (){
                            console.log(offer);
                            var childy = $("#childish").detach();
                            
                            childy.css({ position: 'absolute' });
                            childy.css(offer);
                            
                            $("body").append(childy);
    
                            $("#childish").delay(1000).animate({left: '0px', top: '100px'});
                        });
                 
$("#klakker").on("click", function(){
                                
                            console.log(offerP);
                     
                            var childy = $("#childish").detach();
                            
                            childy.css({ position: 'relative' });                            
                            childy.css(offerP);
    
                            $("#parental").append(childy);
                            $("#childish").delay(1000).animate({left: '0px', top: '100px'});
                        });