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/

Answer 2

是的，使用JavaScript会很容易。既然你知道弹出窗口是否打开，我假设你知道它的宽度和位置。只需创建一个边界框并检查您的元素是否在此框中。getBoundingClientRect在这方面很有用。如果您使用的是jQuery，.offset也可以帮助您。

如果你需要一个例子，请告诉我。