Thursday, November 5, 2015

Z-index 101

Z-index 101
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


No comments:

Post a Comment