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

Question

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

Don't think there is an easy solution or some browser API you could use. You'd probably have to write the same logic as rendering engine is doing, so take in consideration the z-index (and rules that come with it), then the order and structure of html elements. What are you even trying to accomplish? — Marko Gresak, Aug 23 '16 at 20:06
You may be able to do something with https://stackoverflow.com/questions/18780139/how-to-get-bounding-box-for-div-element-in-jquery and checking if any of the selected items' bounding boxes intersect. That won't give you the order but you can eliminate the ones that aren't even near each other. This is how some 2D games work, so searching for bounding boxes will probably get you some games related results. — jedifans, Aug 23 '16 at 20:17
@MarkoGrešak Do you think I could get away with just using the tree depths? — SuperUberDuper, Aug 23 '16 at 20:25
You can check once this post http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection — Shreyos Adikari, Aug 23 '16 at 20:32
@SuperUberDuper it depends on the sturcutre and css rules. If you're not doing anything special in css (z-index, relative/absolute positioning etc.), then yes, you could rely just on the tree structure. — Marko Gresak, Aug 23 '16 at 20:36
@SuperUberDuper Thanks for asking that :) I have moved my comment into a bit rephrased answer. — Marko Gresak, Aug 25 '16 at 13:52

score 1 · Accepted Answer · answered Aug 25 '16 at 13:50

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.

score -1 · Answer 2 · answered Aug 25 '16 at 13:35

-1

If you can use jQuery, check

$(element).css("z-index");

answered Aug 25 '16 at 13:35

DIEGO CARRASCAL

1,999
14
16

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

2 Answers2