JSFiddle - React, Tailwind, and code Playground

by ianwong

HTML

<div id="div1">
    <div id="div2"></div>    
</div>

<input id="button" type="button" value="button" />

CSS

#div1{
    position:absolute;
    width:300px;
    height:150px;
    background-color:lightblue;
    border:solid black;
}

#div2{
    position:fixed;
    width:200px;
    height:100px;
    background-color:lightyellow;
    border:solid black;
}

#button{
      position:absolute;
        top:300px;
    left:100px; 
    
}

JavaScript

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.onclick = function() {
    div2.style.left = div2.offsetLeft + "px";
    div2.style.top = div2.offsetTop + "px";
    div1.style.left = "50px";
}

var button = document.getElementById('button');
button.onclick = function() {
    div2.style.position = "relative";
}