JSFiddle - React, Tailwind, and code Playground

by sweetcoco

HTML

Fill the top 800px with divs that have fill... do not overlap panels.
<div class="panel panel1"></div>
<div class="panel panel2"></div>
<div class="panel panel3"></div>

CSS

.fill {
    background: #222;
    opacity: 0.20;
}
.panel {
    position: absolute;
    background: #53a321;
}

.panel:hover {
    background: #a35523;
}

.panel1 {
    top: 100px;
    left: 80px;
    height: 160px;
    width: 80px;
}

.panel2 {
    top: 80px;
    left: 320px;
    height: 300px;
    width: 100px;
}

.panel3 {
    top: 300px;
    left: 120px;
    height: 60px;
    width: 60px;
}

JavaScript

var panels = [];
var furthestLeft = Infinity;
var furthestRight = 0;
var highest = Infinity;
var lowest = 0;

var findTopLeftX = function(obj){
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

var findTopLeftY = function(obj){
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

$('.panel').each(function(i, pan) {
    var width = $(this).outerWidth();
    var height = $(this).outerHeight();
    
    var topLeftX = findTopLeftX(pan);
    var topLeftY = findTopLeftY(pan);
    
    var topRightX = topLeftX + width;
    var topRightY = topLeftY;
    
    var bottomLeftX = topLeftX;
    var bottomLeftY = topLeftY + height;
    
    var bottomRightX = bottomLeftX + width;
    var bottomRightY = bottomLeftY;
    
 
    var newPanel = {
        topLeftX: topLeftX,
        topLeftY: topLeftY,
        topRightX: topRightX,
        topRightY: topRightY,
        bottomLeftX: bottomLeftX,
        bottomLeftY: bottomLeftY,
        bottomRightX: bottomRightX,
        bottomRightY: bottomRightY
    }; 
    
    if (newPanel.topLeftX < furthestLeft) {
        furthestLeft = newPanel.topLeftX;
    }
    
    if (newPanel.topRightX > furthestRight) {
        furthestRight = newPanel.topRightX;
    }
    
    if (newPanel.topLeftY < highest) {
        highest = newPanel.topLeftY;
    }
    
    if (newPanel.bottomLeftY > lowest) {
        lowest = newPanel.bottomLeftY;
    }
    
    panels.push(newPanel);
    
});

console.log(furthestLeft + ' ' + furthestRight + ' ' + highest + ' ' + lowest);