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 to get css value of an element inside array?

    How do I change the image inside an HTML5 form-validation message?

    CSS: How to use calc(100% - 20px) to get an area to fill up all area OTHER than that of a fixed-width element?

    How to create border bottom with 2 different color?

    How to use jquery function on numbers separated by .(dot) or ,(comma) as thousands separator

    CSS: how to place controls at both extrems of a cell table

    How to select by CSS styles in jQuery?

    How do I make this sprite behave how I want?

    How to do this kind of Button in CSS?

    How to use same header for multiple page inside same html file

    How to force style formatting into child tags of

    How to align lists and text side by side with div tags?

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

    How to get a picture randomly move and turn towards the changing direction around a page? (using jQuery & css)

    How to avoid using JavaScript with CSS attribute selector

    How to set transition from JavaScript while still inheriting style from CSS [closed]

    How to add a mailto to a sentence without extra spacing?

    How to register Css of html page in wordpress theme

    How do I add the date a blog post was created in place of a bullet point under list-style-type?

    How to use CSS selectors to retrieve specific links lying in some class using BeautifulSoup?

    How to style HTML paragraphs with CSS to prevent empty lines between them?

    how to transform in both X & Y direction with CSS Only [duplicate]

    How do i position a div relative to the window page (responsive css)

    How to access to a CSS file in HTML?

    How can I add value to textbox, instead of setting value

    How do I apply an image to background using inline CSS?

    how would I use Javascript, html and css to produce the running tiger effect seen in run4tigers website? [closed]

    How to place buttons next to each other using css Bootstrap

    CSS How to align checkbox image

    How to set different css attributes with JQuery?