Question

I have two div elements. Each of them have 450px width and height. How do I check if the first div is overlapping the second div?

I’ve tried to use javascript hittest, but it’s a little bit complicated. Since I’m trying to find out how it actually work, I would like to get started with a simpler code.

I found out that I can use .getClientRects to get the boundary of an element, but I’m not exactly sure how to compare boundaries.

Please advise me!

Answer 1

Something like this for rect1 and rect2 retrieved via getBoundingClientRect():

var overlap = !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)

Explain: if one or more expressions in the parenthese are true, there’s no overlapping. If all are false, there must be an overlapping.