Click here to Skip to main content
13,456,901 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked
Posted 2 Apr 2013

Z-Index in CSS with Example

, 4 Apr 2013
Rate this:
Please Sign up or sign in to vote.
Z-Index a CSS property with example


This tip helps to understand CSS property "Z-Index".


Many people are confused with how actually the elements in HTML are arranged. Also, some people may not be use this property. Z-Index is an important property of CSS. So I thought of writing a tip on the same. Hope this will help someone.

Using the Code

So far, you know x-axis and y-axis and what actually they refer to. Likewise, there is another axis which shows the order of elements called Z-Axis. It is also called as Z_Index in CSS, which means ordering of elements in stack order.

Stack: A stack is a basic data structure, where insertion and deletion of items takes place at one end called the top of the stack.

Example: Arranging 10 plates one above the other, where you can only take the plate which is at the top and you put another plate at the top itself.

The above example shows that the plate which is at the bottom has less Z-Index and plate that is at the top has higher Z-Index.

The below image shows three divisions ordering each other with different Z-Index values.

The following source code will help you understand about Z-Index through code.

<style type="text/css">
          border: solid 1px silver;
          background-color: #f2f2f2;
          position: absolute;
          z-index: 100;
          height: 100px;
          width: 100px;
          border: solid 1px silver;
          top: 30px;
          left: 30px;
          background-color: #c2c2c2;
          position: absolute;
          z-index: 101;
          height: 100px;
          width: 100px;
          border: solid 1px silver;
          top: 60px;
          left: 60px;
          background-color: #565656;
          position: absolute;
          z-index: 102;
          height: 100px;
          width: 100px;
       <div class="div_exp1" id="div1">
           Z-Index 100
       <div class="div_exp2" id="div2">
           Z-Index 101
       <div class="div_exp3" id="div3">
           Z-Index 102

Points of Interest

Initially, I was confused as to how elements are placed one above the other. But later, I came to know what actually happens. Hope this tip will be very interesting to all.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer Sonata Software Pvt Ltd
India India
Hi.. I am Vinod Kumar B C from Mysore, Karnataka. I have done MCA and currently working as a Software Engineer having 3 Years of Experience in web development. I know, C#, MVC, Sql Server, CSS, JQuery, C, C++, HTML, DB2, DataStructures.

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180322.1 | Last Updated 4 Apr 2013
Article Copyright 2013 by vinodkumarnie
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid