CSS have div over top of another div?

Question

I am not sure how to ask my question. If you go to this site: http://powellgroupconstruction.com/ I am trying to get the bottom of my content class to go over top my footer, like in this example image. enter image description here

Here is my HTML:

<div class="wrapper">

    <div class="content">

    </div><!--content-->

</div><!--wrapper-->

<div class="footer">


</div><!--footer-->

and my CSS

.wrapper{
    background-color:#FFF;
}

.content{

    background-color:#FFF;
    width:1027px;
    min-height:300px;
    margin:0 auto;
    box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
    border-bottom-left-radius:2em;
    border-bottom-right-radius:2em;
}

.footer{
    background-color:#000;
    height:500px;
}

Any help would be much appreciated.

Using [z-indexing (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) is probably more fitting — Travis J, Dec 27 '13 at 16:45
this might help as well. http://stackoverflow.com/questions/270493/how-would-you-make-two-divs-overlap — soomro, Dec 27 '13 at 16:50

score 2 · Accepted Answer · answered Dec 27 '13 at 16:53

you have to only set the content to position relative and elevate a z-index. At this point your content are over the footer.

But now to push your footer behind you need to add a margin-top -100px , because the height you have defined in your css.

try this css code. (this work):

.wrapper{
    background-color:#FFF;
}

.content{

    background-color:#FFF;
    width:1027px;
    min-height:300px;
    margin:0 auto;
    box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
    border-bottom-left-radius:2em;
    border-bottom-right-radius:2em;

    position:relative;
    z-index:999999;
}

.footer{
    background-color:#000;
    height:500px;

    margin-top:-100px
}

Pranav C Balan · Answer 2 · 2013-12-27T16:49:32.163

use z-index property higher than the footer

.wrapper{
    background-color:#FFF;
}

.content{
    z-index:100;
    background-color:#FFF;
    width:1027px;
    min-height:300px;
    margin:0 auto;
    box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
    border-bottom-left-radius:2em;
    border-bottom-right-radius:2em;
    margin-bottom: -100px;
}

.footer{
    z-index:1;
    background-color:#000;
    height:500px;
}
.wrapper,.footer,.content{
    position:relative;
}

Also set position as relative to work the z-index property.For more detail and example visit css-tricks.com.Also set margin-bottom as negative value to overflow above the footer

score 0 · Answer 3 · answered Dec 27 '13 at 16:46

You need to adjust the margins... Make the footer have a negative top-margin or the wrapper have a negative bottom margin... Oh, and give the wrapper a slightly elevated z-index...

.footer {
    margin-top: -100px;
}
.wrapper {
    position: relative;
    z-index: 1;
}

OR

.wrapper {
    margin-bottom: -100px;
    position: relative;
    z-index: 1;
}

I personally prefer the first one...

brouxhaha · Answer 4 · 2013-12-27T16:54:47.113

The problem you have is the wrapper has a background-color. z-index only works with siblings, so you can do this: remove background-color: #fff; from .wrapper (otherwise the .wrapper color will block the footer from showing where it overlaps), or move .footer inside of .wrapper. Then add the following:

.footer {
    position: absolute;
    top: 250px;
    z-index: -1;
    width: 100%;
}

Here's a working Demo

score 0 · Answer 5 · answered Dec 27 '13 at 16:51

0

You can achieve the result by using z-index property and saying position : absolute in div

.content{
    z-index:1000;
     position : absolute
    .........
}

.footer
{
  z-index:0;
  position : absolute
}

answered Dec 27 '13 at 16:51

Haji

1,999
1
15
21

score 0 · Answer 6 · answered Dec 27 '13 at 16:55

Just use the following css rules

.content {
    background-color: #FFFFFF;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
    bottom: -90px;
    box-shadow: 12px 0 15px -4px #888888, -12px 0 8px -4px #888888;
    margin: 0 auto;
    min-height: 300px;
    position: relative;
    width: 1027px;
    height: 570px;
    z-index: 1000;
}
.footer {
    background-color: #000000;
    height: 500px;
    margin: 0 auto;
    position: relative;
}

enter image description here

CSS have div over top of another div?

6 Answers6