Alex Rivera | Logout

find elements that are stacked under (visually) an element in jquery

Asked 2011-04-08T17:58:14.293
10

if i have 2 divs (z index is not assigned), one layered over the over, can i use the reference to the top div to find which div is below it?

as far as the DOM structure goes, these two divs would be siblings. but visually they are stacked on one another.

here's an example:

<body>
<div id="box1" style="background:#e0e0e0;height:100px;width:100px;"></div>
<div id="box2" style="background:#000000;height:100px;width:100px;margin-top:-50px;"></div>
</body>

which results in this: enter image description here

so i'm trying to figure out, when having the black div, box2, a way to return box1 in jquery (using selectors), because box1 is beneath box2, using jquery.

jquery
Edit
Report

1 Answer

3

Maybe something along these lines... detach the element under your cursor (in this case box1) and use document.elementFromPoint to fetch the next element underneath that x,y position.. rough example:

    var first_box = $('#box1');// more programmaticaly would be to use document.elementFromPoint to fetch the element under your cursor

    var first_box_offset = first_box.offset();
    var x = first_box_offset.left;
    var y= first_box_offset.top + first_box.height();

    var reattach_me = first_box.detach();
    var second_box = document.elementFromPoint(x, y);

    $('body').append(reattach_me);
answered 2011-04-08T18:24:10.330

Your Answer