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
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;
}
Sources:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
https://code.google.com/p/chromium/issues/detail?id=39426
No comments:
Post a Comment