Z Index

Z Indices control the placement of elements which overlap. Elements with a greater z-index within a stacking context will appear on top of those with a lower value. Indices are only compared within each stacking context

Example: Normal flow

By default, elements are placed within a document's normal flow. As such they will not overlap and z-index is not relevant

Example: Absolute Positioned

When elements are taken out of the normal flow (for example, by positioning them absolutely), their z-index values are compared within the stacking context.

Example: Creating Stacking Contexts

By giving a container element a z-index and a position, we create a stacking context. z-index values are only compared within a given context and not across the entire document. In this example, the item with a lower z index appears at the top because it exists within a stacking context whose z index is highest.