html - CSS 标题图像 div

Question

我想在我的页面中使用 div。图像的标题位于顶部，然后是菜单 div。 我用图像设置了第四个 div，它的工作。但是当我设置第二个 div 时，它在第一个 div 中。我该如何解决这个问题？

     <div id="slideshow">
    <div>
        <img src="http://img2.wikia.nocookie.net/__cb20100409185740/gtawiki/images/e/e7/Fort_carsonn.jpg" width="1200" height="300" />
    </div>
    <div>
        <img src="http://i12.photobucket.com/albums/a230/buetforasif/FortCarson_ataglance.jpg" width="1200" height="300" />
    </div>
 </div>
 <div id="menu" class="div_menu">

 </div>

#slideshow { 
width: 1200px;
height: 300px;
position: absolute;
left: 0;
right: 0;
margin: auto;
box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
position: absolute; 
top: 0px; 
left: 0px; 
right: 0px; 
bottom: 0px; 
}

div.div_menu {
background-color: #F5F5F5;
width: 1200px;
height: 50px;

position: fixed;
left: 0;
right: 0;
margin: auto;
}

脚本:

<script>
    $(function() {

        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(2000)
            .next()
            .fadeIn(2000)
            .end()
            .appendTo('#slideshow');
        },  4000);

    });
</script>

Answer 1

你的问题是因为 #slideshow 中的 position: absolute;，所以编辑你的 CSS 并试试这个:

#slideshow {
    width: 1200px;
    height: 300px;
    position: relative;
    margin: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

或者如果你出于某种原因想要保持 position: absolute，将 margin-top 添加到 .div_menu，然后试试这个:

div.div_menu {
    background-color: #F5F5F5;
    width: 1200px;
    height: 50px;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 300px; /* Same as the height of #slideshow */
}

希望这对你有帮助..