Tuesday, September 2, 2014

Z-Index computed as auto even though it is set with a value on Chrome

This is a little known fact about z-index and usually missed.  If you read the article on w3schools then also you might miss this. It says:

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

What this essentially mean that the element on which you are applying z-index, you need to have position attribute specified on it. Ideally use one of the above position values. If position attribute in the css style is not set z-index would be computed as auto. Google Chrome is quiet strict about this. Use a syntax like below.

img {
    position: relative;
    z-index: 100;
}

Thats the reason, why many times we don't see z-index working on out elements. 

Sources:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
https://code.google.com/p/chromium/issues/detail?id=39426