Most performant way to check if elements are overlapping
I figured out a way thru trial and error. I'll post this here for anyone else who could use it.



// dismiss -- just creating less CSS
const randomColor = "#" + ((1 &lt;&lt; 24) * Math.random() | 0).toString(16);
document.querySelectorAll('.label').forEach((x, i) =&gt; {
  document.querySelectorAll('.label')[i].style.background = "#" + ((1 &lt;&lt; 24) * Math.random() | 0).toString(16);
});

//function to check for overlapping
function overlayCheck() {
  let points = document.querySelectorAll('.label');
  let rightPos = (elem) =&gt; elem.getBoundingClientRect().right;
  let leftPos = (elem) =&gt; elem.getBoundingClientRect().left;
  let topPos = (elem) =&gt; elem.getBoundingClientRect().top;
  let btmPos = (elem) =&gt; elem.getBoundingClientRect().bottom;

  for (let i = 0; i &lt; points.length; i++) {
    for (let j = 0; j &lt; points.length; j++) {
      let isOverlapping = !(
        rightPos(points[i]) &lt; leftPos(points[j]) ||
        leftPos(points[i]) &gt; rightPos(points[j]) ||
        btmPos(points[i]) &lt; topPos(points[j]) ||
        topPos(points[i]) &gt; btmPos(points[j])
      );

      if (isOverlapping &amp;&amp; j !== i) {
        points[i].innerHTML = `${points[i].innerHTML} C`;
      }
    }
  }
}
overlayCheck();
.parent {
  position: relative;
  display: flex;
}

.label {
  height: 75px;
  left: 0;
  width: 100px;
  margin-left: 10px;
  background-color: orange
}

.cover {
  width: 220px;
  position: absolute;
  left: 0;
  height: 50px;
  bottom: 0;
}
&lt;div class="parent"&gt;
  &lt;div class="label cover"&gt;Label 1&lt;/div&gt;
  &lt;div class="label"&gt;Label 2&lt;/div&gt;
  &lt;div class="label"&gt;Label 3&lt;/div&gt;
  &lt;div class="label"&gt;Label 4&lt;/div&gt;
  &lt;div class="label"&gt;Label 5&lt;/div&gt;
  &lt;div class="label"&gt;Label 6&lt;/div&gt;
&lt;/div&gt;