<style type="text/css"> div{ width:200px; height:200px; background:#EEE; } #two{ position:absolute; left:100px; top:50px; background:#F60; } </style> <div id="one">One</div> <div id="two">Two</div> <div id="three">Three</div> <script> console.log(isOverlap("one","two"));//true console.log(isOverlap("one","three"));//false console.log(isOverlap("two","three"));//true 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; } </script>
Demo:http://jscode.chinacxy.com/code/e72050b3f22a658fa69470a39788ab00.aspx