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:
 |
| The CSS Z-index property |
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.
<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:
 |
| Cute Ninja in front :) |
For FREE programming tutorials, click the red button below and subscribe! :)
website