z-index
z-index
- In CSS, the z-index property is used to control the stacking order of elements on a web page.
- It specifies the relative stack level of an element in the z-axis, which is perpendicular to the screen or viewport.
- Elements with a higher z-index value are positioned above elements with lower z-index values.
Syntax:
z-index: number|auto|inherit|initial;
Possible values:
number: element's stack level is set to the given value. It allows negative values.
auto: It specifies that the order of the stack is equivalent to the parent, i.e., default.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: fixed;
width: 400px;
height: 300px;
z-index: 20;
background-color: red;
}
img {
position: relative;
z-index: 22;
}
h1 {
position: relative;
z-index: 28;
color: blue;
}
</style>
</head>
<body>
<div></div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkCa1-Sh5AUhQp84TJxkGQeT_sreG0szpJnt0sATqy&s"></img>
<h1>Welcome to Quipoin</h1>
</body>
</html>
Output: