Why z-index is not working for div?

Question

I am trying to get my footer to show on top of the footer background, but z-index seems not to be working. Does anyone see what is wrong with it? http://jsfiddle.net/f2ySC/

Answer 1

You have to explicitly define the position property:

.footerBox {
    background-color: #FFFFFF;
    border: 10px solid #DDDDDD;
    margin: 10px 0 -200px -10px;
    width: 1185px;
    z-index: 1000;

    position:relative;

}

http://jsfiddle.net/f2ySC/1/

---

This brings the footer into the current stacking context:

... The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example 'opacity' ...

http://www.w3.org/TR/CSS2/visuren.html#z-index

Answer 2

On footerBox set the position attribute to absolute Your new code should read as follows

.footerBox {
    background-color: #FFFFFF;
    border: 10px solid #DDDDDD;
    margin: 10px 0 -200px -10px;
    width: 1185px;
    z-index: 1000;
    position: absolute;
}

See a demo here

Using position: relative also works

Answer 3

using negative margin is not a good practice. z-index:-1; works it just display the content on the background of another div :)

Answer 4

Is this the effect you are looking for? Updated example

I added position: relative; to #footerBack and .footerBox to enable z-index