Understanding Z-index Property in CSS

Hello guys.

Welcome to our CSS series.

In our last segment we learned about CSS keyframe property.

How with the help of keyframe, we can apply multiple animations on only one element?

We had changed the colour of one element, we had changed the height and the width with the help of one keyframe.

And with the help of another keyframe we had transformed and rotated that.

Along with that we had made it big and small in size with the help of scale property, these two properties we had applied in one keyframe with the help of two different keyframes.

I hope you have performed the practical of our last segment on your own.

If you have any questions during the segment or you have any doubt while performing the practical, you can tell us on forum.learnvern.com.

We will try to revert to all your issues with solutions over there.

Our today's segment is on the CSS Z index property.

Usually there will be a question: what is the Z index?

Z index is actually a way through which more than one element is overlapping.

So, which element will show up first.

We can tell that with the help of the Z index.

For example, it is written here.

Z index in CSS allows us to define a visual hierarchy on the three-dimensional plane that is the Z axis.

It is used to specify the stacking order of the position elements, elements whose position value is either fixed, absolute, whatever position is given.

The stacking order means that the elements position along the Z axis.

This paragraph means that, let's say I have got more than one element, usually we have x axis and y axis.

The axis is through the system in this direction.

I will give the example once again.

We have the x axis and we also have the Y axis along with it.

One axis that starts from here and goes towards this way.

Means in a 3d plane.

The view in front of us, the axis that is there in that view, when we have to show the element over that, in which way we can show it.

When we talk about a three-dimensional plane on our screen, there is three-dimensional pain and if we consider the x axis.

The axis that comes out of our screen that we can consider as the Z axis.

If on that axis there are more than one element placed.

Then we will see it in which way, for example, if I've kept something one over the other.

So, I will see every element one upon the other if I keep the element one over the other but I make it fall in this way.

So, I will see the first element and the elements after that will stop being visible.

In that case how we can see all the elements, which elements should be shown how much or which element we have to give the priority, so that we can see it.

For that we will make use of the Z index, syntax has been given Z index.

There are two ways to do it.

Either we can give a number or we can give auto.

The example is like it was written here, elements whose position value is either fixed, absolute, relative or sticky.

Means it can work in all four positions.

So, we have taken an example where we have taken three positions, we will apply the Z index to all three positions.

In each one of them we are going to apply a different index.

So that we get to know which element should be properly visible to us.

For that first of all, we will open the Sublime Text, example, Z index.

Now we will run this program.

So here we will take one h3.

This is an example of the Z index.

We are in total going to show three elements, we will take one, division one image and we will take one h1 tag and we will place each one of them one upon the other.

First of all, we'll come to div.

So, for the div I will add the style.

So far the div style would be, let's say position, fixed because we are going to add all three positions one by one.

So, we will give fixed size to the div, we will give the width of 400 pixels, height we will take 300 pixels, we will give Z index to it 20.

After that you can give any number, it's not fixed that you have to give 20 itself.

We are taking 20 as an example.

If you want you can give 3, 4, 5, any number.

Background colour we will take, colour for example, we will take blue.

Okay, so this is our division, save, reload.

So, this is our example of the Z index.

This is our big division.

The division is looking too big, so we'll make it 200 and 100, Okay, so this is our division.

Now we will take the next one below the division.

 We will take one image so there are few images lying in our folder.

We also have learnvern logo.

So, we will use learnven logo images, we'll give size to the image, we will give the position first of all relative so that it comes over our division.

After the image we will take it Z index 22.

Okay so this is our division and above that our learnvern image has come.

Width we can give 200 pixels.

We'll make the colour green as both the colours should match.

Now we will take the third thing, we will take one h1 Tag “Welcome to learnvern”.

Okay.

When I'm not giving any Z index to it, it is showing up in this way to us.

Now, I will give the Z index to h1 as well.

First of all, position relative, Z index 24 and colour, let’s say we will give colour as yellow.

So, you can see that the Learnvern that we have written, is overlapping this.

let's say I'll increase its height to 150.

Okay, so this is our Z index.

So, what we are getting in the Z index is that first of all let's say I will comment on all the Z indexes, save.

Even then we are getting the same result.

But if  I comment the position as well along with it, okay, As soon as we have commented the position you can see that every division is getting placed one below the other means on the X axis it is getting placed one by one.

First comes div, then comes image, at the end comes Welcome to LearnVern statement.

If I make its position again fixed and relative.

Again, my elements come one upon the other.

It is starting from one position.

Some of my elements are starting from here.

Now if I give it a Z index.

For example, we will bring back every once Z index.

We are seeing it in this way.

The least Z index is of my division.

So that is hiding behind my division.

If I increase this Z index and make it more than these two.

Let's say I'll make it 30.

So, you can see that my division is getting the most priority, so this division of mine is getting visible.

Behind this the image that is there and the text portion which is behind my division that is getting hidden.

Once again if I give it the least, you can see that my image is getting visible again.

let's say if I give it 23.

Okay, you can see that 22, 23, 24.

So the one with the least Z index, will go behind.

 That is the reason why the image has gone behind.

The Division has more Z indexes.

So, the division is visible to me.

And h1 is on the highest priority, so it is visible to me.

So, this is my Z index.

When we pile one about the other, pile means stacking it one over the other like at home when we arrange the tray or the dishes, one dish on that second, then third, fourth in this why when we arranged the dishes.

If we look from the top, what we get to see is we see the first dish and we cannot see the dishes below it.

In that case the Z index gets applied in this case, which dish we actually want to see.

The dish which will have the highest Z index that will be visible to us.

Same concept is applied to this 3d plane.

Whichever element we have given the highest priority or the highest number that will be visible to us.

Usually, till 999 we can give the Z index, starting from zero, you can even give -1, let's say that you have got a lot of elements and you want that there should be an element which should get the lowest priority every time.

So, you can give it a Z index of -1.

So, that becomes our lowest priority Z index.

And if you want that there should be an element which should be on highest priority all the time.

So, you can give it 999 also Nine hundred ninety-nine.

And then you can give the Z index as much as you want and make a decision in which way you want to show up the elements.

So, this was our Z index.

It is a very easy point Z index.

When we have to work with more than one element, at that time the Z index is very useful, how we can show the elements with the highest priority on the Z axis.

So, guys, in today's segment, if you have any doubt or query, you can tell us on forums.learnvern.com And along with that I will request that you perform the practical of Z index and check it on your own how it runs.

If while checking or while performing the practical you have any questions, you can tell us on forums.learnvern.com.

We will revert to all your questions with the solution over there.

Our next segment is on CSS media query.

When we work with different devices how we apply the CSS based on the width.

Thank you.