SuperUberDuper SuperUberDuper - 3 months ago 9
CSS Question

How do you tell if one element is above another from results from querySelectorAll

How do you tell if one element is above another (like after all the z indexes are calculated) with the results from querySelectorAll.

Answer

Don't think there is an easy solution, as in there is a browser API you could call and get element "z-height".

You could approach this problem similarly to how rendering engine is working, which stacking elements one on top of the other based on DOM tree depth. Then there is also CSS engine, which changes element positions based on tag types and special rules from CSS, such as z-index, special position properties (relative, absolute, etc.) and even CSS "quirks", for example z-index + opacity changes how elements are stacked.

Based on your goal, you could simplify the parsing and ignore what CSS is doing and only take HTML in consideration. There you have DOM API, which makes traversing the tree structure super easy and the DOM rendering engine will handle all the weird cases of wrong-but-still-working markup.