Menu
You can use this to find a document element at a given point
document.elementFromPoint(x, y);
What can you do if there are overlapping elements at the point? (I know this is not a great way to do things -- trying a hackish workaround for a bug before a deadline).
830
Using CSS Z-Index property developer can stack elements onto one another. Z-Index can have a positive or a negative value. NOTE − If elements that overlap do not have z-index specified then that element will show up that is mentioned last in document.
You can use the CSS z-index property. It worked fine on me! Since the z index of #two and #three are higher than #one , they will be on top when there is an overlapping. You may select any other integer values, as long as one index is higher than another.
To check if two elements overlap, use the getBoundingClientRect() method to get an object containing information about the relative position to the viewport of the elements. Then, compare the boundary edges (top, right, bottom, left) of the two rectangles. Here is the HTML for the examples in this article. Copied!
This could happen for several reasons, especially when you consider the position problems with divs from one website to another. Similarly, box elements may overlap for a few reasons, ranging from positioning errors to overflow issues and simple float problems.
If you want to find all the DOM elements that overlap over a point, you can simply use document.elementsFromPoint(), which returns an array of all elements found in said point (apparently, ordered from top to bottom relative to the viewport, i.e.: if there's an overlay, it will show up first in the array)
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
