Как добавить боковое меню поверх существующего фонового изображения

Question

Я создаю веб-сайт, и пока я включил содержимое заголовка и нижний колонтитул. Теперь меня попросили добавить боковое меню поверх существующего фонового изображения. Я пытался с помощью

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

Но это не добавляет к существующему компоненту

. Скорее он сдвигает 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 содержит вместо этого ИЗОБРАЖЕНИЕ.

Красный квадрат - это ваше меню, вы можете изменить этот DIV с помощью тега включения.

В желтом у вас есть верхний колонтитул, а в черном нижний колонтитул.

Я не знаю, может ли это помочь вам архивировать то, что вы хотите.