html - nivo slider 在过渡时与 div 重叠

Question

我有一个实现了 nivoslider 的页面，但我有两个问题。

1. Nivoslider 会显示大图，但我需要根据用户屏幕调整它们的大小，我一直尝试最大宽度和最大高度但不起作用

2. 当过渡开始时，nivoslider 显示加载图像的克隆，但该图像始终位于页面顶部，因此它与所有内容(div、导航、图像)重叠。

这是我的 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;
}

注意:使用“重要”，以便它取代溢出值可能已经具有的任何值。