z-index: Who Sits on Top?
When elements overlap, z-index decides which one wins. Predict the result, learn the rules, and use the smallest values that solve the problem.
Step 1 of 3
z-index orders overlapping elements
When two positioned elements overlap, the browser needs to decide which one paints on top. By default, the later element in the HTML wins. z-index overrides that: elements with a higher z-index paint on top of elements with a lower z-index.
z-index only affects elements whose position is not static. On a static element it does nothing.
Think of it this way: Think of stacking pancakes. The one you put down last sits on top by default.
z-index lets you cheat — you can mark a pancake 'always-on-top' or 'always-on-bottom' regardless of when it was added.Learn more on MDN
HTMLREAD ONLY
PREVIEW