CSS Properties: How z-index property specify the z-order of an element

Last update on March 01 2024 13:09:11 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How z-index property specify the z-order of an element</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
div {
 width: 100px; /* Sets the width of div elements to 100 pixels */
 height: 100px; /* Sets the height of div elements to 100 pixels */
 padding: 20px; /* Sets the padding inside div elements to 20 pixels */
 }
 .w3r1, .w3r2, .w3r3, .w3r4 { /* Selects elements with classes w3r1, w3r2, w3r3, and w3r4 */
 position: absolute; /* Sets the position of selected elements to absolute */
 }
 .w3r1 { /* Styles elements with class w3r1 */
  background: #ccff00; /* Sets the background color of w3r1 elements to light green */
  outline: 5px solid #9900CC; /* Sets the outline of w3r1 elements */
  top: 100px; /* Sets the distance from the top edge of the document to 100 pixels */
  left: 200px; /* Sets the distance from the left edge of the document to 200 pixels */
  z-index: 10; /* Sets the stacking order of w3r1 elements to 10 */
  }
  .w3r2 { /* Styles elements with class w3r2 */
  background: #0f0fcc; /* Sets the background color of w3r2 elements to light blue */
   outline: 5px solid #fff0CC; /* Sets the outline of w3r2 elements */
   top: 50px; /* Sets the distance from the top edge of the document to 50 pixels */
   left: 75px; /* Sets the distance from the left edge of the document to 75 pixels */
    z-index: 100; /* Sets the stacking order of w3r2 elements to 100 */
	}
	.w3r3 { /* Styles elements with class w3r3 */
	background: #cc00ff; /* Sets the background color of w3r3 elements to purple */
	outline: 5px solid #660066; /* Sets the outline of w3r3 elements */
	top: 125px; /* Sets the distance from the top edge of the document to 125 pixels */
	left: 25px; /* Sets the distance from the left edge of the document to 25 pixels */
	 z-index: 150; /* Sets the stacking order of w3r3 elements to 150 */
	 }
	 .w3r4 { /* Styles elements with class w3r4 */
	 background: #00ffcc; /* Sets the background color of w3r4 elements to cyan */
	 outline: 5px solid #FF0099; /* Sets the outline of w3r4 elements */
	 top: 200px; /* Sets the distance from the top edge of the document to 200 pixels */
	 left: 350px; /* Sets the distance from the left edge of the document to 350 pixels */
	 z-index: 50; /* Sets the stacking order of w3r4 elements to 50 */
	 }
	</style>
	</head>
	<body><!-- Begins the body of the document -->
	<h3><strong>w3resource Tutorial</strong></h3><!-- Displays a level 3 heading with strong text "w3resource Tutorial" -->
	<div class="w3r1">w3resource 1. z-index 10 <!-- Begins a div element with class w3r1 -->
	<div class="w3r2">w3resource 2. z-index 100</div><!-- Nested div with class w3r2 -->
	<div class="w3r3">w3resource 3. z-index 150</div><!-- Nested div with class w3r3 -->
	</div><!-- Ends the div with class w3r1 -->
	<div class="w3r4">w3resource 4. z-index 50</div><!-- Displays a div with class w3r4 -->
	</body><!-- Ends the body section -->
	</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates the use of the z-index property in CSS to specify the stacking order of elements.
Each <div> element is styled with a specific background color, outline, position, and z-index.
The z-index property determines the stacking order of elements. Elements with higher z-index values are stacked above elements with lower z-index values.
The elements are positioned absolutely to allow precise placement within the document.

Live Demo :

See the Pen z-index-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page