1. z-index only applies to positioned elements (relative, absolute, fixed)
2. Sets the stacking level to the integer and establishes a new stacking context if gives an integer value to z-index property
3. There are two concepts: stacking level and stacking context
There are seven possible levels on each stacking context, which are listed below.
1. Background and borders — of the element forming the stacking context. The lowest level in the stack.
2. Negative Z-Index — the stacking contexts of descendants elements with negative z-index.
3. Block Level Boxes — in-flow non-inline-level non-positioned descendants.
4. Floated Boxes — non-positioned floats
5. Inline Boxes — in-flow inline-level non-positioned descendants.
6. Z-index: 0 — positioned elements. These form new stacking contexts.
7. Positive Z-index — positioned elements. The highest level in the stack.
See the image for better understanding of 7 stacking level
Stacking context can be explained by the following rules.
1. The default stacking context is the root element
2. Establish a new stacking context with the z-index property
3. Child elements cannot be stacked above (or below) the parent element’s stacking level
References
http://bitsofco.de/2015/how-z-index-works
http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
No comments:
Post a Comment