Describe z-index and how stacking context is formed code example

Example: z-index stacking context

in CSS/HTML,
A stacking context is a 3D conceptualisation of an element. 
This can be a root stacking context, as created by the html element. 
Or it can be a local stacking context, as created by specific properties and 
values.

Rules: What creates a stacking context
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#the_stacking_context

Rules: Paint order of the stack's inner elements:
- Elements with a negative stack level, typically elements with z-index: -1
- Elements with a position value of static.
- Elements with a stack level of 0, typically positioned elements with a z-index value of auto.
- Elements with positive stack levels, e.g. a positioned element with a z-index value of 1 or higher.
- Two elements with the same stack level are layered based on their source order. Successive elements stack on top of their predecessors.