无法将div隐藏在视口之外

Question

当视口小于960px时，我想隐藏视口中的绝对定位div。这是带有隐藏规则的div和媒体查询的css：

@media all and (max-width: 960px) {
    .newsbox{
        right:-355px;
    }

}  

.newsbox{
    position:fixed;
    right:0;
    top:0;
    height:100%;
    background:#fff;
    z-index:900;
    width:395px;
    overflow:hidden;
    background:#f7f7f7;
}

当浏览器窗口不超过960px时，有人可以解释为什么这条规则没有隐藏这个元素吗？提前谢谢！

Answer 1

您的@media规则需要放在下面，否则级联会导致您的外.newsbox规则始终优先，并覆盖内right内的.newsbox样式规则，无论您的媒体查询是否生效：

.newsbox {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    background: #fff;
    z-index: 900;
    width: 395px;
    overflow: hidden;
    background: #f7f7f7;
}

@media all and (max-width: 960px) {
    .newsbox {
        right: -355px;
    }
}