div 100％幅のコンテンツを理由なしにプッシュ

Question

divを100％幅に設定してお互いに接触してはいけないという問題があります。 2番目のdivは最初のdivの内容を左側に押しています。

2つのdivはとです。ロゴを表示するためのナビゲーションへのZ-インデックスが設定されています。

あなたはここにプッシュ見ることができます：http://www.sayhistudios.dk/om-bager-bosse/

コードは以下の通りである：表示されたナビゲーションはここに正しいサブページに比べhttp://www.sayhistudios.dk/を。

<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

あなたは.bannertopするpostion:absolute（または同等のもの）とz-index:-1を追加する必要があります。これにより、ページのボックスモデルを残して他の要素の位置に影響を与えず、他の要素の後ろに表示されます。

さらに良い解決策は、画像をbackground-imageのbodyにすることです。

編集：絶対それはそれに反応しませんでした：

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