Z-Index property is like a layering system for CSS. It helps a lot when it comes to organizing elements on a web page.Today I’m gonna show you a simple example use of the CSS Z-index property.At the end of this tutorial, we will have th following output:
Step 1: Prepare two sample images and place it inside your images folder.Step 2: Create your index.html file. We should have these codes.
Step 2: Create your index.html file. We should have these codes.
<html>
<head>
<title>Z Index</title>
<style type="text/css">
/* it will load the image with red border */
.image1 {
position: absolute;
background-image:url("images/image1.jpg");
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border: thin solid red;
z-index: 1;
}
/* it will load the image with blue border */
.image2 {
position: absolute;
background-image: url("images/image2.jpg");
top: 20px;
left: 20px;
width: 100px;
height: 100px;
border: thin solid blue;
z-index: 2; /* the higher value would be in front */
}
</style>
</head>
<body>
<div class='image1'></div>
<div class='image2'></div>
</body>
</html>
Step 3: If you want the image with red border to be on top, just make that z-index value of image1 class higher than the value of image2 class. For example: z-index: 3;We will come up with this:
 |
Thank You sir , Very helpful and informative one.
You’re welcome bro!