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

Question

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 struct

Answer 1

The only way, as you have it in the sample case, to actually have another DIV layering over another is if it comes after it in the DOM. So, your simple answer is that any div is over another div if it comes after it in the DOM tree. Please provide a more illustrative example if this is insufficient.

You can illustrate that this works by attempting to add a positive margin to DIV1. You'll note that it kicks DIV2 downward. DIV2, however, when given a negative margin will "layer" over DIV1. In your scenario using margins and divs without z-index or other positioning methods, it's not possible for DIV1 to overlap DIV2.

EDIT based on comments:

The process of figuring out if two elements occupy the same space is a different game. A general run down of your method would be to get the coordinate position for your anchor and get its width and height as well. Then, loop through all the divs and see if the anchor's position overlaps any of their coordinates. If it overlaps multiple divs, take the one last in the DOM as it'll be on top of the other.

Please don't make me write a code sample. :)

Answer 2

As far as I know, there isn't a selector for this. You could probably write a function to do this though. I would iterate over each element that precedes the div in question and check whether or not it's bounding box is in the desired div.

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);

Answer 4

Check if box1 is sharing the same position as a certain spot on the page.

---

And only because I'm a little bored, I made this awesome-er

http://jsfiddle.net/hunter/PBAb6/

function GetAllElementsAt(x, y) {
    var $elements = $("body *").map(function() {
        var $this = $(this);
        var offset = $this.offset();
        var l = offset.left;
        var t = offset.top;
        var h = $this.height();
        var w = $this.width();

        var maxx = l + w;
        var maxy = t + h;

        return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null;
    });

    return $elements;
}