javahtmlcssjspscriptlet

How to add a side menu(nav-menu) over an existing background image


I'm creating a website and so far I've included the header contents and footer. Now i've been asked to add a side menu on top of the existing background image. I tried using

      <%@ include file="sidemenu.jsp"%> 
But it doesn't add over the existing <div> component, rather it pushes the div down so that it goes outside the background image.

Could you please tell me how to achieve this??


Solution

  • Basically if you want to put something on top of another, you can use position relative/absolute like example below:

    <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 */
    }