無法將div從視口中隱藏

Question

當視口小於960像素時，我想將絕對定位的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; 
    } 
}