判断元素是否有重叠部分属于前端实例代码，有关更多实例代码大家可以
查看
。
使用绝对定位或者浮动，可能导致多个元素重叠，实际应用中，可能需要判断相应元素是否已经重叠。
下面通实例介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>判断元素是否有重叠部分-前端教程网</title>
<style type="text/css">
width:200px;
height:200px;
background:#EEE;
margin-top:5px;
#two{
left:100px;
top:50px;
background:#F60;
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
function isOverlap(idOne,idTwo){
var objOne=$("#"+idOne),
objTwo=$("#"+idTwo),
offsetOne=objOne.offset(),
offsetTwo=objTwo.offset(),
topOne=offsetOne.top,
topTwo=offsetTwo.top,
leftOne=offsetOne.left,
leftTwo=offsetTwo.left,
widthOne=objOne.width(),
widthTwo=objTwo.width(),
heightOne=objOne.height(),
heightTwo=objTwo.height();
var leftTop=leftTwo>leftOne&&leftTwo<leftOne+widthOne&&
topTwo>topOne&&topTwo<topOne+heightOne,
rightTop=leftTwo+widthTwo>leftOne
&&leftTwo+widthTwo<leftOne+widthOne
&&topTwo>topOne&&topTwo<topOne+heightOne,
leftBottom=leftTwo>leftOne&&leftTwo<leftOne+widthOne&&
topTwo+heightTwo>topOne&&topTwo+heightTwo<topOne+heightOne,
rightBottom=leftTwo+widthTwo>leftOne&&leftTwo+widthTwo<leftOne+widthOne&&
topTwo+heightTwo>topOne&&topTwo+heightTwo < topOne+heightOne;
return leftTop||rightTop||leftBottom||rightBottom;
$(document).ready(function(){
$("#result").text(isOverlap("one","two"));
</script>
</head>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<h1 id="result"></h1>
</body>
</html>
代码实现了判断两个元素是否有重叠部分的功能，下面介绍一下实现过程。
一.实现原理:
获取两个元素相对于窗口的坐标值和尺寸，然后根据相关的值来判断两个元素在网页中是否有重合的区域；代码通过判断一个元素和另一个元素的相对位置关系，来判断两个元素是否有重合的部分，就一数学问题，比较难以表述，更多内容看代码注释。
二.代码注释:
（1）.function isOverlap(idOne,idTwo){}，声明一个函数用于判断两个元素是否有重合的部分。具有两个参数，都是对象的id值。
（2）.var objOne=$("#"+idOne)和objTwo=$("#"+idTwo)获取指定id属性值的jquery对象。
（3）.offsetOne=objOne.offset()，获取objOne对象在窗口的偏移量。offset()函数返回的对象包含top和left属性。
（4）.offsetTwo=objTwo.offset()，和上面同样的道理。
（5）.topOne=offsetOne.top，获取offsetOne对象相对于窗口顶部的偏移量。
（6）.topTwo=offsetTwo.top，和上面是同样的道理。
（7）.leftOne=offsetOne.left，获取offsetOne对象相对于窗口左部的偏移量。
（8）.leftTwo=offsetTwo.left，和上面是同样的道理。
（9）.widthOne=objOne.width()，获取objOne对象的宽度。
（10）.widthTwo=objTwo.width()，和上面是同样的道理。
（11）.heightOne=objOne.height()，获取objOne对象的高度。
（12）.heightTwo=objTwo.height()，和上面是同样的道理。
（13）.leftTop=leftTwo>leftOne&&leftTwo<leftOne+widthOne&&topTwo>topOne&&topTwo<topOne+heightOne，当offsetTwo元素的左边缘位于objOne元素的内部并且offsetTwo元素的上边缘位于objOne的内部，也就是说有重合的部分，如果都满足，leftTop的值就为true，否则为false，以下三个都是一样的道理，大家可以自行理解一下。
（14）.return leftTop||rightTop||leftBottom||rightBottom，只要满足任何一个，都会返回true，也就是有重合的部分。
（15）.$(document).ready(function(){}），文档结构完全加载完成再去执行函数中的代码。
（16）.$("#result").text(isOverlap("one","two")),调用函数，判断id为one和two的元素是否有重合的部分。
三.相关阅读:
（1）.offset()参阅
jQuery offset()方法
一章节。
（2）.width()参阅
jQuery width()方法
一章节。
（3）.height()参阅
jQuery height()方法
一章节。
（4）.text()参阅
jQuery text()方法
一章节。
判断元素是否有重叠部分，这样的场景在实际项目中还是用的比较多的，关于判断元素是否有重叠部分就介绍到这了。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu
