如何检测使用JavaScript重叠（覆盖）的元素？

如何使用JavaScript检测重叠HTML元素？如何检测使用JavaScript重叠（覆盖）的元素？

我有一个项目列表（<ul>）。它使用JavaScript上下滑动。当它滑落时，根据项目的数量，它可能与此时绝对定位的其它元素（<div>）重叠（可以更改）。

当<ul>与<div>重叠时，如何将新样式应用于<div>以将其暂时隐藏或稍微向下移动以防止重叠？
它只是没有找好，当它们重叠））

在这里你可以看到，我说的是：http://timetable.raj.fvds.ru/

非常感谢！

2011-04-19 Feniks502

如果你有完全定位的元素，那么它不是微不足道的 - 你需要计算每个元素的位置等，并采取相应的行动。也许你应该考虑在没有绝对的情况下实现相同的效果，也许可以在内部亲戚（位置：相对）内使用浮点数（float：left）和绝对数（position：absolute）的混合。 – Andris 2011-04-19 18:26:16

function isObjOnObj(a,b){ 
    var al = a.left; 
    var ar = a.left+a.width; 
    var bl = b.left; 
    var br = b.left+b.width; 

    var at = a.top; 
    var ab = a.top+a.height; 
    var bt = b.top; 
    var bb = b.top+b.height; 

    if(bl>ar || br<al){return false;}//overlap not possible 
    if(bt>ab || bb<at){return false;}//overlap not possible 

    if(bl>al && bl<ar){return true;} 
    if(br>al && br<ar){return true;} 

    if(bt>at && bt<ab){return true;} 
    if(bb>at && bb<ab){return true;} 

    return false; 
}

来源

2011-04-19 18:26:59 ChrisThompson

嗯......如果这是伪代码，当然。你需要检查所有'offsetParent'的位置，获得'offsetWidth'，'offsetHeight'等... – 2011-04-19 18:30:36

为什么不只是将UL的z-index提高到底部div以上？

地址：

#wrap { 
    z-index : 2; 
    position : relative; 
}

来源

2011-04-19 18:29:12

我已经试过了。它看起来很可怕） – Feniks502 2011-04-19 18:51:25

这感觉就像碰撞检测，而且也只是发布了一个解决方案。相反，我会建议计算一个菜单需要重叠多少个列表项（即10），并且当这些菜单（包含10 li）被选中时，隐藏div。

来源

2011-04-19 18:29:58 oblig

这是不可能的，在不同的网站页面上的项目数量和其内容是不同的，所以在一些页面项目列表需要真正的地方。 – Feniks502 2011-04-19 18:57:16

列表项目或页面的内容？如果列表项目的高度是统一的，那么你仍然可以计算出10个项目将在'top：100px'处重叠'div'，因此5个项目与'top：50px'重叠等等。你会写一个函数来获取项目的数量和'div'的位置，并决定是否隐藏。或者我错过了什么？ – oblig 2011-04-20 12:44:50

heh。您可以将当前窗口宽度分解为列表项包装时的等式。（当然，文本大小和文本长度。）你目前的想法是什么？ – oblig 2011-04-20 13:06:23

如何检测使用JavaScript重叠（覆盖）的元素？

回答

相关问题