Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why z-index is not working for div?

Tags:

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/

like image 316
TruMan1 Avatar asked Mar 06 '12 21:03

TruMan1


People also ask

Why Z-index is not working with div?

z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.

What to do if Z-index is not working?

To sum up, most issues with z-index can be solved by following these two guidelines: Check that the elements have their position set and z-index numbers in the correct order. Make sure that you don't have parent elements limiting the z-index level of their children.

Does Z-Index work with position absolute?

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

How do I show a div on top of another?

Use CSS position: absolute; followed by top: 0px; left 0px; in the style attribute of each DIV. Replace the pixel values with whatever you want. You can use z-index: x; to set the vertical "order" (which one is "on top"). Replace x with a number, higher numbers are on top of lower numbers.


2 Answers

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

like image 142
Alex Avatar answered Sep 21 '22 22:09

Alex


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

like image 44
Sel Fish Avatar answered Sep 20 '22 22:09

Sel Fish