htmlcssposition

CSS Underlay a previous div

Sorry if the question is a little vague, I found it quite hard to title. Anyway, I am currently creating a new design and I have hit an issue, I basically want one div to start underneath another, as I am using rounded edges on the div before and want to cover up the whitespace.

I am able to get the div to underlay, however when I set the z-index it becomes the bottom element and the interaction with links etc can't be done. (e.g links can't be clicked, can't highlight text)

To better explain, I have created this JSFiddle link, it shows exactly what I am trying to do. Try clicking the link, it will simply not work.

The code on the JSFiddle is as follows:

#div-1, #div-2 {
width: 350px;
border-radius: 0 0 16px 16px;
}

#div-1 {
background-color: grey;
}

#div-2 {
background-color: black;
position: relative;
z-index: -1;
margin-top:-25px;
}

Any help is appreciated, and if you would like me to clarify anything please do ask.

Thanks,

Jake

Solution

  • Demo http://jsfiddle.net/Amn7S/

    Dont use z-index:-1; use z-index:1; and z-index:2; then it works.

    #div-1 {
    background-color: grey;
    z-index:2;
    position:relative;
}

#div-2 {
    background-color: black;
    position: relative;
    margin-top:-25px;
z-index:1;    
}