How does the 'z-index' property function in CSS?
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'.
Updated
Official answer available
Read the opening below, then unlock the full answer and practical guidance.
z-index controls stack level within a stacking context. Positioned elements are common users, but flex and grid items can also use a non-auto z-index without position being changed from static. Numbers in separate contexts are not globally comparable.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS example</title> <style> .stage { position: relative; height: 140px; } .low { position: absolute; z-index: 1; } .inside {...