java - 如何在现有背景图像上添加侧边菜单（导航菜单）

Question

我正在创建一个网站，到目前为止，我已经包含了页眉内容和页脚。现在我被要求在现有背景图像之上添加一个侧边菜单。我尝试使用

      <%@ 包含文件="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

让我们看一个例子： 例子

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 包含一个 IMAGE 。

红色方块是您的菜单，您可以使用包含标签修改该 DIV。

黄色是页眉，黑色是页脚。

我不知道这是否可以帮助您归档您想要的东西。