2013-05-08 18 views
0

我無法弄清楚如何讓DIV顯示在它下面的DIV上。換句話說,我的網頁有一個頭,有一個浮動的DIV和一個右浮動的DIV。在下面是一個菜單欄。我沒有很多菜單項,所以我希望浮動右邊的DIV中的圖像部分重疊菜單欄。我能夠使它與絕對定位一起工作......但這並不理想。我繼續前進並更改了菜單欄的寬度,但這更多的是獲得我想要的臨時修復。思考?DIV不會顯示在它下面的DIV

www.sacspartans.org

<div id="page" class="hfeed site"> 
<header id="masthead" class="site-header" role="banner"> 
    <div id="header-left">  
      <hgroup> 
     <h1 class="site-title"> 
      <a href="<?php echo esc_url(home_url('/')); ?>"> 
      <img src="http://sacspartans.org/wp-   
          content/uploads/2013/05/banner.png" alt="SacSpartans" 
          title="SacSpartans" border="0" /> 
      </a> 
     </h1> 
     <h2 class="site-description"><?php bloginfo('description'); ?> 
        </h2> 
      </hgroup> 
    </div> 
    <div id="header-right"> 
     <img src="http://sacspartans.org/wp- 
        content/uploads/2013/05/california1.png" alt="MSU Alumni Club of 
        the Sacramento Valley" title="MSU Alumni Club of the Sacramento 
        Valley" border="0" /> 
    </div> 
    <div id="navigation-bar"> 
    <nav id="site-navigation" class="main-navigation" role="navigation"> 
     <h3 class="menu-toggle"><?php _e('Menu', 'twentytwelve'); ?></h3> 
     <a class="assistive-text" href="#content" title="<?php esc_attr_e( 
        'Skip to content', 'twentytwelve'); ?>"><?php _e('Skip to 
        content', 'twentytwelve'); ?></a> 
     <?php wp_nav_menu(array('theme_location' => 'primary', 
        'menu_class' => 'nav-menu')); ?> 
    </nav> 
    </div> 

現在CSS信息。

/* Header */ 
#header-left { 
float: left; 
} 

#header-right { 
float: right; 
margin-top: 0; 
} 

#navigation-bar { 
width: 575px; 
} 
+0

查看Z-index。另外,使用相對位置。 – Jonast92 2013-05-08 03:37:04

+0

如果你在jsfiddle.net上創建一個例子,這很有幫助,因爲如果我們都在查看和處理同一件事情,它會更容易。 – jdigital 2013-05-08 03:39:22

+0

發佈呈現的HTML,而不是PHP源代碼。 – j08691 2013-05-08 03:43:50

回答

0

嘗試使用任一position:absoluteposition:fixed屬性<div>和(對於最上面的<div>例如,z-index:101)應用適當的z索引。它應該工作。 Rgds,AB

+0

關於位置的壞處:絕對是我的圖片將停留在同一個地點,無論瀏覽器大小。我嘗試使用相對位置並應用z-index,但這也不起作用。 – jthespartan 2013-05-09 00:55:17