nivo 滑块在转换时与 div 重叠答案

【问题标题】：nivo slider overlaps divs while transitionsnivo 滑块在转换时与 div 重叠
【发布时间】：2015-01-31 00:40:11
【问题描述】：

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

Nivoslider 会显示大图像，但我需要根据用户屏幕调整它们的大小，我一直尝试使用 max-width 和 max-height 但不起作用
当过渡开始时，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*/
}

【问题讨论】：

标签： html css nivo-slider

【解决方案1】：

有一个简单的解决方案。只需这样做：

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

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

【讨论】：