javascript - 如果一个 div 与另一个 div 重叠，则隐藏它

Question

我的主要内容位于页面中央，宽度约为 900 像素。在大屏幕上，我的内容的右边距和浏览器窗口的右侧之间有足够的空间，我可以在右下角显示一个 100x100 像素的小 div，它看起来不错，因为该 div 和主要内容。当屏幕尺寸较小时，相对定位的div与我内容的右下角重叠。如果 div 在我的内容的 20px 以内，我该如何设置它的 display=none？谢谢

Answer 1

我会选择纯 CSS 解决方案。听起来像是媒体查询的完美案例:

#rightdiv {
    position: relative;
    width: 100px;
    height: 100px;
}

@media screen and (max-width: 1000px) {
    #rightdiv {
        display: none;
    }
}

当浏览器窗口大小至少为 1000px 宽度时，该 CSS 将仅显示 #rightdiv 元素。如果它变小，它会应用 display: none 属性。

示例:http://jsfiddle.net/7CCtH/