JSFiddle - React, Tailwind, and code Playground

by tushhtrivedi

HTML

<div id="source" style="width:80px;background-color:red;">
	Cover <br><br> Me
</div>
<div id="target" style="background-color: blue;">
	Covered You
</div>

JavaScript

$(document).ready(function() {
  coverDiv('source', 'target');
  $(window).resize(function() {
       coverDiv('source', 'target');
    });
});

function coverDiv(sourceId, targetId){	
    var source = document.getElementById(sourceId);
	var sourceComputed = window.getComputedStyle(source);
	var target = document.getElementById(targetId);	
    var positioningProps = ["float","width","height","left","top","marginLeft","marginTop","paddingLeft","paddingTop"];
	var cssText = "";
    for(var i in positioningProps){        
            cProp = positioningProps[i];              
            if(source.style[cProp] == "" || source.style[cProp] == null)
                target.style[cProp] =  sourceComputed[cProp];
            else
                target.style[cProp] = source.style[cProp];
    }
    source.style['position'] = "absolute";
	source.style['zIndex'] = "1";
    target.style['position'] = "absolute";
	target.style['zIndex'] = "999";
}