CSS Z-Index Property

Last update: •Date posted:
COMMENTS•2 Comments/in /Posted by MIKE DALISAY

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

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.