如何检查JavaScript中的块重叠百分比？

我有两个不同颜色的div块。我想改变第二个块的颜色，如果它覆盖另一个块超过80%，使用JavaScript！！！。这是我的密码。结果-

这是我的密码：

.FirstBlock{
高度：100px；
宽度：100px；
边框：1px纯黑；
背景颜色：绿色；
不透明度：0.8；
}
.第二街区{
高度：100px；
宽度：100px；
边框：1px纯黑；
利润上限：-25px；
背景色：红色；
不透明度：0.8；
}

您可以使用

const-box=document.queryselectoral（“.box”）；
功能检查重叠（ele1、ele2）{
const boundings1=ele1.getBoundingClientRect（）；
const boundings2=ele2.getBoundingClientRect（）；
const top1=parseInt（boundings1.top）；
const height1=parseInt（边界1.高度）；
const top2=parseInt（boundings2.top）；
常数重叠=1-（top2-top1）/高度1；
如果（重叠>=0.8）{
ele2.classList.add（“重叠-80”）；
}
//log（{ele1，ele2，overlap}）；
}
选中重叠（框[0]，框[1]）；
选中重叠（框[2]，框[3]）；
选中重叠（框[4]，框[5]）
正文{
字体系列：无衬线；
}
.盒子{
宽度：400px；
高度：100px；
不透明度：0.5；
}
.box-1、.box-3、.box-5{
背景：青色；
}
.方框-2{
利润上限：-80px；
背景：黄色；
}
.方框-4{
利润上限：-20px；
背景：黄色；
}
.方框-6{
利润上限：-90px；
背景：黄色；
}
.重叠-80{
边框：红色虚线4px；
}

80%重叠
20%重叠
90%重叠
如果块彼此跟随，您可以使用
transform:translateY
将第二个div向上移动80%的高度

我建议使用rgba颜色作为背景，如果你想在div元素上做些什么的话。我在第二个片段中展示了它的样子


.FirstBlock，
.第二街区
{
高度：100px；
宽度：100px；
边框：1px纯黑；
不透明度：0.8；
背景颜色：绿色；
}
.第二街区{
背景色：红色；
转化：translateY（-80%）；
}

这是否回答了您的问题？“如果它覆盖”-它们如何覆盖？调整大小？拖动？在询问其他问题之前，请先阅读。您是否将百分比作为重叠面积来衡量？也就是说，它们可能不仅仅是一个直接位于另一个之下？它们可能有不同的尺寸，或者部分在屏幕外？