javascript - HTML:有什么方法可以确定一个元素是否在另一个元素后面？

Question

我们有一个带有搜索弹出窗口的应用程序。您搜索一个术语，它会在页面中找到它们并向该词添加一个类，从而突出显示文本。有时，找到的实例位于搜索弹出窗口后面的页面区域中。如果是这样，我想调低搜索弹出窗口的不透明度，以便用户可以看到它背后的实例。有什么简单的方法可以做到这一点吗？任何提示或技巧表示赞赏。一项要求是搜索弹出窗口在搜索后保持打开状态，因此我们不能关闭/隐藏它。

Answer 1

您可以在找到的文本和弹出窗口上使用 getBoundingClientRect() 并比较尺寸。

MSDN
MDN range , element

您可以直接对文本范围进行操作，但听起来您有一个元素包裹找到的文本以应用高亮显示，所以我只使用该元素。我认为您可以将找到的文本和弹出窗口传递给此函数以测试它们是否重叠:

function isOverlapping (a, b)
{
    var rectA = a.getBoundingClientRect();
    var rectB = b.getBoundingClientRect();
    return rectA.top < rectB.bottom && rectA.bottom > rectB.top &&
        rectA.left < rectB.right && rectA.right > rectB.left;
}

编辑:我手上的时间肯定太多了，因为这里有一个有趣的小演示:http://jsfiddle.net/gilly3/qUFLJ/4/