Z-index

Open the lamp shop page from the previous lesson, with its fixed header, and scroll down by 50px. The product card does not slide under the header. Instead, it slides over it: the card's white background, its border, and the "Sale" badge cover the green header. Nothing in the CSS asked for this, so the browser must have its own rule for which box is drawn on top.

How the browser decides what is on top

When boxes overlap, the browser paints them in layers, from the back to the front. A later layer covers an earlier one. For a simple page with no `z-index