定位元件下另一

我不是一個專家的網絡開發，所以請在這裏忍受我。定位元件下另一

我想顯示一個頁面的橫幅樣式標題，其頂部由275x116的圖像佔據，然後是橫幅頂部70％出現的水平菜單欄（使用ul項目樣式）。

我該如何設置，以便橫幅出現在我的導航下方？目前，我的菜單欄左側的一部分位於圖像下面，但我想它是相反的，因此菜單欄上面的圖片，有些事情是這樣的：

============= <start of header> =========== 
    -------- 
    | img | 
    |  | 
    |  Horizontal menu 
    |  | 
    -------- 
    ============= <end of header> ===========

我的CSS：

#header 
{ 
    background-color: green;   
    border: 0; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    width: 100%;  
    height: 120px; 
} 

#logo 
{ 
    background: green url(images/logo.png) no-repeat scroll 0 0; 
    margin: 0px 0px; 
    border: 1px solid white;  
    left: 20px; 
    top: 20px; 
    width: 275px; 
    height: 116px; 
    position: absolute; 
    z-index: -1000; 
} 

.container { 
    border:1px solid grey; 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
}

我的HTML：

<body> 

<div id="header"> 
    <div id="logo"> 
    </div> 

    <div class="container" id="primaryNavbar"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Books</a></li> 
     <li><a href="#">Shows</a></li> 
     <li><a href="#">Movies</a></li> 
    </ul>     

    <div class="clear">&nbsp;</div>     

    </div> <!-- end of container --> 

</div> <!-- end of header --> 
</body>

我認爲，設置位置爲「絕對」的標誌元素，並添加在一個非常低的z-index將實現這一點，但認爲並非如此這裏。

有什麼建議嗎？

來源

2010-03-16 Cedar Jensen

附加這些項目現有的樣式：

#header 
{ 
    position: relative; //this will keep your absolute items inside of this container 
} 

#logo 
{ 
    z-index: 1; 
} 

.container { 
    z-index: 2; 
    position: absolute; 
} 

.container ul li { 
    float: left; 
}

來源

2010-03-16 22:03:52

使.container浮動左邊，相對位置並移動它，直到它在你需要它的地方。

來源

2010-03-16 22:00:04

定位元件下另一

回答

相關問題