div無寬度推送內容100％寬度

Question

對於設置爲100％寬度且不應互相接觸的div有問題。第二個div將第一個div的內容推到左邊。

這兩個div是和。爲導航設置一個z-index來顯示徽標。

這裏你可以看到推：http://www.sayhistudios.dk/相比，子頁面裏顯示的導航是正確的位置：http://www.sayhistudios.dk/om-bager-bosse/

的代碼如下。

<div id="nav"> 
<div id="nav_wrap"> 
<a href="http://www.example.com"><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" id="logo" /></a> 
    <ul id="main-nav"> 
    <?php wp_list_pages('title_li='); ?> 
    </ul> 
</div> 
</div> 
<br clear="all" /> 
<div class="bannertop"> 
    </div> 
<br clear="all" /> 

    /* Navigation */ 

#nav{ 
    background-image: url('images/nav_bar.png'); 
    height:44px; 
    width:100%; 
    z-index:0 
    overflow:hidden; 
} 
#nav_wrap { 
    width:900px; 
    margin:0 auto; 
} 

.bannertop { 
    width:100%; 
    background-image: url('images/bbg.png'); 
    height:410px; 
    margin-top:200px;  
    z-index:-1; 
} 

Answer 1

您需要添加postion:absolute（或等價的東西），並z-index:-1到.bannertop。這會導致它離開頁面的框模型，因此不會影響其他元素的位置，並出現在其他元素的後面。

一個更好的解決方案可以讓您的圖像的body。

編輯：

.bannertop { 
    width:100%; 
    background-image: url('images/bbg.png'); 
    height:410px; 
    margin-top:200px; 
    position:absolute; 
    z-index:-1; 
}