nivo滑塊重疊divs而過渡

Question

我有一個頁面，實現nivoslider，但我有兩個問題。

1. Nivoslider將呈現大幅的圖片，但我需要他們根據用戶的屏幕大小，我一直tryied最大寬度和最大高度，但不工作

2. 當過渡nivoslider開始顯示已加載圖像的克隆，但此圖像始終位於頁面的頂部，因此它與所有內容（div，nav，圖像）重疊。

這裏是我的CSS和HTML

HTML：

<header>something</header> 
<div id="contenido"> 
<div id="body_section" style="display: block !important; width: 100% !important; height: 100% !important;" > 

    <div class="slider-wrapper theme-default" style="position: static; z-index: 0 !important; "> 
     <div id="slider" class="nivoSlider slider_personalizado"> 
      <img src="index_images/slider/slide1.png" height="200" /> 
      <img src="index_images/slider/slide2.png" height="200" /> 
      <img src="index_images/slider/slide3.png" height="200" /> 
      <img src="index_images/slider/slide4.png" height="200" /> 
      <img src="index_images/slider/slide5.png" height="200" /> 
      <img src="index_images/slider/slide6.png" height="200" /> 
     </div> 
    </div> 
</div> 
<footer>something</footer> 

CSS：

body{ 
    margin: 0 auto; 
    overflow-y: hidden; 

} 

header{ 
    width: 100%; 
    height: 53px; 
    position: fixed; 
    z-index: 0; 
    background-color: #f0f0f0; 
} 

footer{ 
    clear:both; 
    background-color: #f0f0f0; 
    width: 100%; 
    height: 48px; 
    position:fixed; 
    bottom:0; 
    left:0; 
    color:#2e2e2e !important; 
} 



.slider_personalizado{ 
    z-index: 0 !important; 
    position: static !important; 

} 

#body_section{ 
    display: block; 
    position: static; 
    margin-top: 53px; 
    height: -moz-calc(100% - 101px); /* Firefox */ 
    height: -webkit-calc(100% - 101px); /* Chrome, Safari */ 
    height: calc(100% - 101px); /* IE9+ CSS3*/ 
    top:53px; 
    left:0px; 
    right:0px; 
    bottom:48px; 
    width:100%; 
    float:left; 
    clear:both; 
    z-index:0; 
} 

修改NIVO-slider.css

.nivoSlider { 
    position:relative; 
    width:100%; 
    height:auto; 
    overflow: hidden; 
     z-index:-99 
} 
.nivoSlider img { 
    position:static; 
    top:53px; 
     bottom: 48px; 
    left:0px; 
    max-width: none; 

     max-height: -moz-calc(100% - 101px); /* Firefox */ 
     max-height: -webkit-calc(100% - 101px); /* Chrome, Safari */ 
     max-height: calc(100% - 101px); /* IE9+ CSS3*/ 
} 

Answer 1

有一個簡單的解決方案。只是這樣做：

#div-that-it-overlaps { 
    overflow: hidden!important; 
} 

注：使用「重要」，以便它取代任何值溢出值可能已經擁有。