Hey this gives me an idea

<h1 id="element1" style="border: 1px, solid red;">AAAAAA</h1>
<h1 id="element2" style="top: 25; position: absolute; border: 1px, solid red;">EEEE</h1>

<script>
const element1 = document.getElementById('element1'); 
const element2 = document.getElementById('element2'); 
const rect1 = element1.getBoundingClientRect(); 
const rect2 = element2.getBoundingClientRect(); 
 
// Check if the elements are touching 
if ( 
  rect1.right >= rect2.left && 
  rect1.left <= rect2.right && 
  rect1.bottom >= rect2.top && 
  rect1.top <= rect2.bottom 
) { 
  alert('The elements are touching'); 
} else { 
  alert('The elements are not touching'); 
}
</script>