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也可以帮助你。

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