Instruction: Explain what the 'z-index' property is and how it is used in CSS.
Context: This question probes the candidate's understanding of CSS layout techniques, specifically how stacking contexts are managed with 'z-index'.
Official answer available
Preview the opening of the answer, then unlock the full walkthrough.
To begin with, the 'z-index' property in CSS is applicable only to elements that have a position value other than static—which includes relative, absolute, fixed, or sticky. This property accepts an integer value, which can be positive or negative, and this value determines the element's priority in the stacking order. Elements with a higher 'z-index' value are rendered on top of those with a lower value.
Let's take a practical example to illustrate its use. Imagine we're creating a modal dialog that should appear over other content when activated. By assigning a higher 'z-index' value to the modal—and ensuring it has a position value that allows 'z-index' to take effect—we can ensure that the...