Question

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

如何查找给定引用对象上方（或下方）的所有元素，不依赖于简单的显式z-index，而是根据更一般的样式规则？

我的问题的焦点仅在于z排序。通过＆＃34;找到＆＃34;我的意思是，有一个（javascript / jquery）算法来选择或迭代上面/下面的元素。

notes ：寻找文档，我想

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/

最好是一个人可以查询＆＃34;渲染引擎＆＃34;直接以某种方式 - 在给定的x-y位置点击之后直接触发顶部元素（在那个地方） - 所以信息已经存在于某个地方......！

Answer 1

这是你找到所有重叠元素的方法，但我不知道如何通过z-index对它们进行排序。如你所说，有很多选择影响z指数的顺序。你需要一个巨大的代码才能做到这一点。不确定性能，因为你需要几次循环所有元素。

$("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;
        });

在另一个div之上找到图层中的div（z-index）

1 个答案: