The elements of a web page can be positioned in three dimensions. “Layers” can be positioned partially or completely above or below other layers.
Required knowledge:
Syntax
Simply apply the z-index attribute with an integer as the value. An element with a z-index of 2 is above an element with a z-index of 1.
z-index: integer;
z-index values can be negative integers.
Codepen
Play with the z-index values in the Codepen below:
See the Pen Stacking up with CSS by David Fox (@foxbeefly) on CodePen.
References:
- W3Schools.com (No date) CSS z-index property. Available at: https://www.w3schools.com/cssref/pr_pos_z-index.php (Accessed: 31 August 2023).
- W3Schools.com (no date) CSS layout – the position property. Available at: https://www.w3schools.com/css/css_positioning.asp (Accessed: 31 August 2023).