如何在现有背景图片上添加侧边菜单

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。

用黄色表示标题，用黑色表示页脚。

我不知道这是否能帮助你实现你想要的。