z-index

Think of the page as a stack of transparent sheets. z-index decides which layer an element sits on, and higher values cover lower ones. It only works on elements with positioning (relative, absolute, fixed, sticky), or on children of Flex or Grid containers.

The most common confusion is "I set it to 9999 and it's still covered." The cause is usually a stacking context. The parent itself sits on a low layer, or has properties like transform or an opacity below 1, so no matter how big the child's z-index is, it only gets compared inside the parent. The usual fix is to render the dialog directly under body, which React calls a Portal.

Plan z-index values for the whole project, like sticky navbar 100, dropdown menus 200, dialogs 1000, toasts 1100. Don't sprinkle 9999 everywhere.