CSS z-index Property
CSS z-index: CSS z-index permits us to represent any visual hierarchy over a 3D plane that is the z-axis. This index can be applied to describe the positioned element’s stacking order (these are the elements whose value of the position is sticky, relative, absolute, or fixed). The order of the stacking means that any place of a component over the z-axis, perpendicular to a screen.
It will depict the order of an element when they overlap with each other.
Syntax:
z-index: number|auto|inherit|initial;
Property Values
number: This property value defines the stack level of an element, which will help to set any given value. It permits the use of negative values.
auto: This property value defines the stack’s order is equal to its parent, that is the default value.
Let’s try to examine this concept using the following illustrations.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
position:fixed;
width:550px;
height:300px;
z-index:20;
background-color: violet;
}
img
{
position:relative;
z-index:22;
}
h1
{
position:relative;
z-index:28;
color:purple;
}
</style>
</head>
<body>
<div></div>
<img src="Flower1.jpg"></img>
<h1> Welcome to the Tutorial and Example </h1>
</body>
</html>
Output:
