z-index property of CSS
In this blog, you will learn about the CSS z-index property. Z-index property of CSS is used to order an overlapping element which one to show first.
Sometimes HTML elements got overlapped with each other then we have a need to show the second element on top of the first element.
It is something similar to the Photoshop layer, In Photoshop if we want to show an object on the top then we put that layer on the top of another layer same in CSS if we want to show an element on the top of another element then we use the z-index property of CSS.
Z-index uses the numeric value to show an element, the higher the value of z-index it will show the element on the top of the stack, mostly designer uses random value like z-index:99999, etc. if we use a negative value in z-index then it will put the element on the bottom of the stack.
Z-index only works on positioned elements (absolute, relative, fixed, sticky) and on flex items.
Syntax:
z-index:value;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>Web Development Institute</h1>
<img src="images/web-development-institute-logo.webp" width="100" height="140">
<p>If you are looking for a web designing and web development institute then web development institute is best for you.</p>
</body>
</html>
Output:
Here in this output, you can see the image at the bottom of the stack and the content is the top of the stack because we have given a negative value of z-index to the image property.
Categories: web designing css
.svg)