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:

enter image description here

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/


    CSS Howto..

    How do I put a box around my Flot graph?

    How to properly style current_page_item based from theme

    How to Overlay a Transparent Navbar Over a Fullscreen Jumbotron

    How to dynamically change the line height of each line in content editable div in php jquery?

    How can I apply an external CSS class to a span created with dojo.create?

    How to overlap a border in CSS in order to create tabs?

    Integrating CSS and CherryPy: How to fix the 404 “/” Not Found Error?

    How to change floating div's width to fill all the space they occupy?

    How to resize in
    with float:left?

    How can I change css stylesheet with dart?

    How to change color of a single letter in a word using CSS/HTML or Javascript [closed]

    How to center absolute position element in my case

    How to vertical align top in my case

    CSS: How to make consecutive lines in Paragraph Go over Left Floated Image with height

    How to center align a div vertically which uses bootstrap?

    How to place a div on right side of cascading tables - CSS

    How do people make sections in HTML pages? [closed]

    How can I programmatically position multiple backgrounds using Sass/Compass?

    how do I select in css so the items appears in hover state In entire page(mega menu)

    How to not send images to mobiles in a semantic manner

    How to remove the blue halo glow from jQuery Mobile input elements that receive focus

    How to expand my CSS3 menu and reduce its width

    AJAX Call returns JSON, how to render properly formatted data

    CSS-how to text-indent a nested unordered list

    Box-shadow is overlapping other elements, how can I fix it?

    how to make image in over than other like this

    how to find a class and apply a style with jquery?

    How to make triangle section separator [closed]

    CSS: Div boxes overlap each other and hide text. How to “clear” them?

    How to vertical-align:bottom 2 floated divs with text