检查一个html元素是否相交？

Question

基本上我有3个正方形（3个divs），我想检查其中一个是否与另一个相交。

我正在使用该功能。

document.getElementById("container1").getBoundingClientRect();

这是使用此功能的输出

但是我不知道如何验证一个元素是否确实与另一个元素相交。

例如，粉红色的边框与蓝色的边框相交，反之亦然，而红色的边框div不相交。有什么办法可以验证这个交集？

<div class="container1" id="container1">

</div>
<div class="container2" id="container2">

</div>
<div class="container3" id="container3">

</div>

container1Rect = document.getElementById("container1").getBoundingClientRect();
container2Rect =document.getElementById("container2").getBoundingClientRect();
container3Rect = document.getElementById("container3").getBoundingClientRect();

这是我的实时代码：

https://jsfiddle.net/cyst0m71/