Does Intersector Observer works with Z-indexes?

Question

I am trying to create a frontend logic here, and the requirement is as follows -:

1. There are 4 UI elements on the screen.
2. On certian device resolutions, some of these UI elements overflow outside of the screen or get hidden behind the main header component.
3. I want to prompt the user to change the zoom level of the browser till all of the 4 UI elements are completely visible in their respective position or not.

Initially, I thought of using the Intersection Observer to check the Intersection Ratio of the 4 UI elements. But, I am confused if the intersections observer works when elements are hidden visually, but present on the screen DOM wise?

Answer 1

You are basically asking two questions:

[how to detect when some element] overflow outside of the screen [or offsetParent…]

That's exactly what intersection observer is for.

[...] or get hidden behind [other positioned element].

Sadly, there is no top-level native API similar to intersection observer for this. You can only query "what is the topmost element on given coordinates" with elementFromPoint.

So technically it is possible to detect if some element is (partially) obscured by other element, and what obscures it, with combinations of getBoundingClientRect (or getClientRects) and elementFromPoint. See https://stackoverflow.com/a/1542908/540955 for a simple POC.