How to overlap a div to an another div without changing their positions - Css

Tags: html,css,css-position,overlap

Problem :

I have two divs on the top of the webpage. I just want to overlap the shadow of the top div to the following one. Absolute and relative positioning completely changed the positions/places of divs by either expanding or fixing position. Is there a line of code that just achieves to decide which div will be overlapped and which div won't be without changing their positions? If there is not, how I can do this with posititioning? My top div:

div#divSlogan{
    background-color: #FFBD01;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1.15%;
    padding: 0.1%;
    -moz-box-shadow: 0px 0px 10px 2px #888888;
    -webkit-box-shadow: 0px 0px 10px 2px #888888;
    box-shadow:  0px 0px 10px 2px #888888;
}

The following div:

div#menu{
    text-align: center;
    font-size: 120%;
    background-color: #FFA700;
    padding: 0.1%;
    height: 20%;
    width: 49%;
    margin-left: auto;
    margin-right: auto;
}

My webpage:

All in all, I want to put the shadow of the top div (which is written Listen. Enjoy..) to the following below div (which is menu). How can I do this?

---

Solution :

You don't need to use absolute positioning for this .I'm not sure why relative positioning didn't work for you . To use z-index you need to use absolute , relative or static position . Here is the working code , replace the div#menu by this in your css file .

div#menu{
    text-align: center;
    font-size: 120%;
    background-color: #FFA700;
    padding: 0.1%;
    height: 20%;
    width: 49%;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    z-index:-1;
}

Edit 1: You have to use position relative here because z-index won't work otherwise .

Here is a JSFiddle of this working: http://jsfiddle.net/pezrwv0z/3/

Edit 2 : Other things that can be improved in the code . Instead of margin-left:auto ; margin-right:auto; use

margin:0 auto ;

To center the div .

height:20%;

You can't give height a value in % , use pixels (px) instead . eg: height:50px;

Edit 3 : It seems that links don't work in a container with negative z-index . Here is the updated fiddle . http://jsfiddle.net/pezrwv0z/3/