CSS Z-Index Property

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.

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 :)

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]

2 comments

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top