CSS Z-Index Property

Photo of Mike Dalisay
Modified Wednesday, November 17, 2010
by - @ninjazhai
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.
          <title>Z Index</title>

          <style type="text/css">
               /* it will load the image with red border */
               .image1 {
                    position: absolute;
                    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 */
      <div class='image1'></div>
      <div class='image2'></div>
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! :)
Thanks for the comments!
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.