JSFiddle - React, Tailwind, and code Playground

by Pangur Ban

HTML

<div class="result"></div>
<div class="box1">1</div>
<div class="box2">2</div>

CSS

html, body {
  height: 100%;
}

body {
  margin: 0
  ;
  position: relative;
}

.box2,
.box1 {
  width: 100px;
  height: 100px;
  position: absolute;
  line-height: 100px;
  text-align: center
}

.box1 {
  top: 60px;
  left: 30px;
  background: rgba(0,0,0,0.1);
}

.box2{
  top: 159px;
  left: 120px;
  background: rgba(0,0,0,0.1);
}

JavaScript

var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var resultEl = document.querySelector('.result');

bound1 = box1.getBoundingClientRect();
bound2 = box2.getBoundingClientRect();

var a = {
	x: bound1.left,
  y: bound1.top,
  x1: bound1.right,
  y1: bound1.bottom
};

var b = {
	x: bound2.left,
  y: bound2.top,
  x1: bound2.right,
  y1: bound2.bottom
};

var result = intersects(a, b);
resultEl.textContent = result;

function intersects( a, b ) {
  return !( a.y > b.y1 || a.y1 < b.y || a.x1 < b.x || a.x > b.x1 );
}