javascript - 计算div重叠区域和位置

Question

假设我有两个绝对定位的 div，是否可以计算这两个 div 重叠的位置，然后绘制另一个 div 放置在重叠区域的顶部。

我一直在网上搜索，我遇到的大多数事情都只关心重叠检测，就像这个小提琴

我不明白如何获得重叠区域的以下位置：

offsetTop
offsetLeft
width
height

任何帮助将不胜感激指出我将从哪里开始。

对于我一直在玩的东西，我有这个小提琴- 你会看到我正在尝试创建一个 div 来坐在重叠部分并将它着色为两种颜色的混合

Answer 1

我还没有错误检查它，但我相信你想要这样的东西：http: //jsfiddle.net/GApu5/4/

计算如下：

var l1=div1.offset().left-8;
var t1=div1.offset().top-8;
var w1=div1.width();
var h1=div1.height();

var l2=div2.offset().left-8;
var t2=div2.offset().top-8;
var w2=div2.width();
var h2=div2.height();    

var top = Math.max(t1,t2);
var left = (l2>l1 && l2<(l1+w1)) ? l2 : (l1>l2 && l1<(l2+w2)) ? l1 : 0;
var width = Math.max(Math.min(l1+w1,l2+w2) - Math.max(l1,l2),0);
var height = Math.max(Math.min(t1+h1,t2+h2) - Math.max(t1,t2),0);
overlay.css({'top': top, 'left': left, 'width': width, 'height': height});

并展示各方面的作品：http: //jsfiddle.net/GApu5/5/