Position
Using z-index
Only works on positioned elements (ie those without the default position: static setting).
By default, element boxes are rendered on Layer 0.
position
Stacking context
static
Default: The top, right, bottom, left, and z-index properties have no effect.
Space is created for the element in the page layout.
relative
Base position same as static, but offset by top, right, bottom, left, and z-index.
Space is created for the element in the page layout.
absolute
Positioned by top, right, bottom, left, and z-index.
No space is created for the element in the page layout.
fixed
Base position is relative to the viewport.
Can cause performance and accessibility issues.
sticky
Doesn’t scroll.
Can cause performance and accessibility issues.