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/