css - 无法将 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;
}

谁能解释一下为什么当浏览器窗口不超过 960 像素时这条规则不隐藏这个元素？提前致谢！

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;
    }
}