JSFiddle - React, Tailwind, and code Playground

by Mauricio Fidalgo

HTML

<textarea></textarea>
<p id="teste">TESTESdasdasdasdlansldnofjnojnsoajdnasd</p>

CSS

p{
    width:80%;
    background:red;
}

JavaScript

//http://stackoverflow.com/a/442474/1989562
function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
function overlap(element){
	this.element = element;
    this.overlapper= document.createElement("Div");
	this.__constructor = function(){
		var left = getOffset(this.element).left;
		var top = getOffset(this.element).top;
		var width = this.element.offsetWidth;
		var height = this.element.offsetHeight;
		this.overlapper.style.position = "absolute";
        this.overlapper.style.width = width + "px";
        this.overlapper.style.height = height + "px";
		this.overlapper.style.left = left+"px";
		this.overlapper.style.top = top+"px";
        this.overlapper.style.background = "black";
        this.overlapper.style.zIndex = 999;
        document.body.appendChild(this.overlapper);
	}
	this.update = function(){
        var left = getOffset(this.element).left;
        var top = getOffset(this.element).top;
        var width = this.element.offsetWidth;
        var height = this.element.offsetHeight;
        this.overlapper.style.top = top + "px";
        this.overlapper.style.left = left + "px";
        this.overlapper.style.width = width + "px";
        this.overlapper.style.height = height + "px";
	}
	this.__constructor();
}
var teste = new overlap(document.getElementById("teste"));
window.onresize = function(e){
    teste.update();
}
//use this if you really want to update this on any situation
setInterval(function(){teste.update();},50);