Different Examples of CSS z-index Property
Example 1: In this example, we are setting the z-index value to -1.
<!DOCTYPE html>
<html>
<head>
<title>
z-index Property
</title>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
h1,
p {
background-color: green;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<img src=
"https://media.w3wiki.org/wp-content/uploads/geek.png"
width="400" height="150">
<p>This example shows the use of z-index property.</p>
</body>
</html>
Output:
Example 2: In this example, we are setting the z-index value to 1.
<!DOCTYPE html>
<html>
<head>
<title>
z-index Property
</title>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: +1;
}
h1,
p {
background-color: green;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<img src=
"https://media.w3wiki.org/wp-content/uploads/geek.png"
width="400" height="150">
<p>This example shows the use of z-index property.</p>
</body>
</html>
Output:
In the Example 1 the z-index is set to -1 therefore, the image appears behind the text but in Example 2 when the z-index is set to +1 the image hides the text.
Supported Browsers: The browser supported by z-index property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 4.0
- Apple Safari 1.0
CSS z-index Property
The CSS z-index
property is a powerful tool that controls the stacking order of positioned elements on a webpage. It’s particularly useful when elements overlap, as it determines which element covers the other.