javascript - 在另一个 div 上方的层(z-index)中找到 div

Question

我有可能重叠的透明 div。它们可以通过显式 CSS z-order 或默认的 DOM 排序以“z 顺序”定位。 根据样式规范，DOM 排序、z-index 和 display 样式的多种组合都会影响元素的最终有效 z 位置。

如何不依赖于简单的显式 z-index 而是根据更通用的样式规则找到所有高于(或低于)给定引用对象的元素？

我的问题的重点仅在于 z 顺序。 “查找”是指使用 (javascript/jquery) 算法来选择或迭代上方/下方的元素。

笔记:我认为正在寻找文档

https://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/

比

好一点

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

如果能以某种方式直接查询“渲染引擎”，那将是最好的 - 毕竟点击给定的 x-y 位置会直接触发顶部元素(在那个地方) - 所以信息已经存在于某处...... !？

Answer 1

这是找到所有重叠元素的方式，但我不确定如何按 z-index 对它们进行排序。正如您所说，有很多选项会影响 z-index 顺序。您将需要大量代码来执行此操作。不确定性能，因为您需要将所有元素循环几次。

$("div").on("click", function() {
            var div = $(this);
            $('body').find('*').each(function() {
                if($(this).width() > 0 && $(this).height() > 0) {
                    if((($(this).offset().left <= div.offset().left && $(this).offset().left+$(this).width() >= div.offset().left)
                        || ($(this).offset().left < div.offset().left+div.width() && $(this).offset().left > div.offset().left))
                        && (($(this).offset().top <= div.offset().top && $(this).offset().top+$(this).height() >= div.offset().top)
                        || ($(this).offset().top < div.offset().top+div.height() && $(this).offset().top > div.offset().top)
                        )) {
                        console.log($(this));
                    }
                }
            });
            return false;
        });