如何在現有背景圖片上添加側邊菜單

Question

我正在創建一個網站，至今我已經包含了頁眉內容和頁腳。現在我被要求在現有的背景圖片上添加一個側邊菜單。我嘗試使用

 
     <%@ include file="sidemenu.jsp"%>

但它並沒有增加現有的 < div>組件。相反，它會推低div，使其超出背景圖像。

你能告訴我如何做到這一點？

Answer 1

基本上，如果你想放的東西在另一個上面，你可以用相對/絕對像下面的例子位置：

<div id="bg"> 
    <div class="sidebar">side menu goes here</div> 
</div> 

#bg{ 
    position:relative; 
} 
.sidebar{ 
    position:absolute; 
    top:0; 
    left:0; /* assign the element to the left */ 
} 

Answer 2

讓我們看一個例子： Example

HTML ：

<div id="mainDiv"> 
    <div id="header">This is my header</div> 
    <div id="menu"> 
      <li>My first option</li> 
      <li>My second option</li> 
    </div> 
    <div id="footer">My footer</div> 
</div> 

CSS：

mainDiv { 
    width: 1024px; 
    height: auto; 
    background: #ccc; 
} 

#header { 
    width: 100%; 
    height: 20px; 
    background: yellow; 
} 

#menu { 
    width: 200px; 
    height: 50px; 
    background: red; 
} 

#footer { 
    width: 100%; 
    height: 20px; 
    background: black; 
    color: white; 
} 

正如你在這個例子看到，我添加了灰色背景的主DIV。我明白，在你的情況下，DIV包含一個圖像。

紅色方塊是您的菜單，您可以使用包含標籤修改該DIV。

用黃色表示標題，用黑色表示頁腳。

我不知道這是否能幫助你實現你想要的。