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:
Live Demo :
See the Pen z-index-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4