Question

如果我有2个div（未分配z索引），一个分层覆盖，我可以使用对顶部div的引用来找到它下面的div吗？

就DOM结构而言，这两个div将是兄弟姐妹。但在视觉上它们彼此堆叠在一起。

这是一个例子：

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

结果如下： enter image description here

所以我试图找出，当有黑色div，box2时，一种在jquery中返回box1的方法（使用选择器），因为box1位于box2下面，使用jquery。

Answer 1

检查box1是否与页面上的某个位置共享相同的位置。

只是因为我有点无聊，我做了这个非常棒的

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

Answer 2

也许沿着这些方向的东西......分离光标下的元素（在本例中为box1）并使用document.elementFromPoint获取x，y位置下面的下一个元素..粗略示例：

    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 3

据我所知，没有选择器。你可以编写一个函数来做到这一点。我将迭代在div前面的每个元素，并检查它的边界框是否在所需的div中。

Answer 4

唯一的方法，就像在示例中一样，实际上有另一个DIV层叠在另一个上面，如果它在DOM之后。所以，你的简单答案是任何div都在另一个div上，如果它在DOM树之后。如果不充分，请提供更具说明性的示例。

您可以通过尝试向DIV1添加正边距来说明这是有效的。你会注意到它会向下踢DIV2。但是，当给出负边距时，DIV2将会是＆＃34;层＆＃34;超过DIV1。在使用没有z-index或其他定位方法的边距和div的场景中，DIV1无法与DIV2重叠。

根据评论编辑：

确定两个元素是否占据相同空间的过程是一个不同的游戏。您的方法的一般规律是获取锚点的坐标位置并获得其宽度和高度。然后，循环遍历所有div并查看锚点的位置是否与其任何坐标重叠。如果它与多个div重叠，请在DOM中取最后一个，因为它将位于另一个之上。

请不要让我写一个代码示例。：）

查找在jquery中（视觉上）元素下堆叠的元素

4 个答案: