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。这会导致它离开页面的框模型，因此不会影响其他元素的位置，也不会出现在其他元素的后面。

全方位的更好解决方案是让您的图片成为background-image的{{1}}。

编辑：

body

宽度为100％的div无理由地推送内容

1 个答案: