Describe z-index and how stacking context is formed. (Cont...)

Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of HTML hierarchy.

A stacking context is an element that contains a set of layers. Within a local stacking context, the z-index values of its children are set relative to that element rather than to the document root.

Describe z-index and how stacking context is formed. (Cont...)

Layers outside of that context — i.e. sibling elements of a local stacking context — can't sit between layers within it.

Let's say two elements A and B are siblings with element B written after element A in DOM, then the children of element A cannot be higher than element B no matter what z-index is being applied on children.

Describe z-index and how stacking context is formed. (Cont...)

z-index: 1;

z-index: 100;

z-index: 2;

Element A with z-index as 1.

Child of Element A with z-index as 100.

Element B with z-index as 2.

Describe z-index and how stacking context is formed. (Cont...)

Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

A handful of CSS properties trigger a new stacking context, such as opacity less than 1, filter that is not none, and transform that is not none.

Describe z-index and how stacking context is formed. (Cont...)

Code:

Link 1:

https://stackblitz.com/edit/js-nm98dv?file=index.html

Link 2: for better understanding.

https://stackblitz.com/edit/js-vbnhrb?file=index.html