如果它与另一个div重叠,则隐藏div

Question

我的主要内容位于页面中心,宽度约为900px.在大屏幕上,我的内容的右边缘和浏览器窗口的右边之间有足够的空间,我可以在右下角显示一个小的100x100px div,它看起来很好,因为该div和主要内容.当屏幕尺寸小于相对位置的div与我的内容的右下角重叠时.如果它在我的内容的20px范围内,我怎么能设置display = none？谢谢

Answer 1

我会在这里寻找纯CSS解决方案.听起来像是一个完美的案例media queries:

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

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

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

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