15
Aug

What is Z index?

As many of us know, CSS works on three dimensions: width, height, and depth. Width and height are easily managed, whereas depth is configured with Z-Index.

So… What is Z-Index?: Simply put, it is the depth management for elements in CSS.

How does it work?

Let us assume we have 3 divs. In this case, we place #first, #second, #third, and the #container that shall hold all 3.

#container {position: relative; background: #ccc;}
#first{position: absolute; z-index: 1; background: #ff0000;}
#second{position: absolute; z-index: 2; background: #00ff00;}
#third{position: absolute; z-index: 3; background: #0000ff;}

Let me explain:
We use a container with a relative position (position:relative;) to mark a limit for absolute elements. The elements in this example have an absolute position and a marked z-index. Here, 1 is the deepest and 3 is the closest.

In short, to use z-index you need to be very capable of handling absolutes and relatives. If you know how to use these, you will surely handle it in no time. Now, it is up to you to go and try, make your own examples and keep learning.