The z-index property sets the order in which positioned elements overlap, allowing us to create more complex webpage layouts. Elements with higher values overlay those with lower values.

When assigning z-index values, give yourself some wiggle room. Using values that closely follow one another like 1, 2, and 3 means that if you want to add another element to the layout, you'd need to change all elements' z-indexes. Values like 1, 10, and 15 would be a better choice. This property also takes negative values — which means that the element will be positioned below the local stacking context, like in the example.