Why z-index is not working for div?

css positioning
TruMan1 picture TruMan1 · Mar 6, 2012 · Viewed 34.6k times · Source

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

xandercoded picture xandercoded · Mar 6, 2012

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

Related questions

Make div stay at bottom of page's content all the time even when there are scrollbars

CSS Push Div to bottom of page Please look at that link, I want the opposite: When the content overflows to the scrollbars, I want my footer to be always at the complete bottom of the page, like Stack Overflow. …

Read More
How can I make a div stick to the top of the screen once it's been scrolled to?

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page.

Read More
In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document?

.offset([coordinates]) method set the coordinates of an element but only relative to the document. Then how can I set coordinates of an element but relative to the parent? I found that .position() method get only "top,left" values relative …

Read More