All language subtitles for 083 The CSS Z-Index and Stacking Order.en_US

All right.

So this is looking pretty awesome already but we can make it look even better.

So one of the things that bothers me a little bit is the fact that this image takes up so much space

that our top title section is a lot bigger than it needs to be.

So what I would like to happen is what if we can make this image show up behind this features page and

thereby making this top section more compact and makes our web site look a lot more together.

So in order to achieve this look we have to understand a more advanced CSS concept which is the

z-index.

So we know that each element on screen has a x and y position so we can move this image up or to the

right or to the left or downwards.

But it's also got a z position or a z-index i.e. whether it it's more towards you or if it's going

away from you.

So, in order to make this image go behind this feature section, we have to make the image’s z-index

lower than this section so that it goes behind this section.

Now this is an advanced CSS concept, which is why we're covering it only now.

And it's something that even fully fledged web designers and developers understand poorly.

So we're going to tackle it at this stage when we've already pretty much gotten to grips with the basic

CSS and Bootstrap.

So I'm going to create a new Code Ply so I can show you fully how this works, and I'm going to create

three divs. Let’s call the first one,

give it a class of red, and we'll call this one red, and then we'll have a yellow and a blue.

So I'm going to make all three of these divs have a height of 100 pixels and a width of 100 pixels.

And then I'm going to give them all a border of say 1 pixel solid.

And now I'm going to add some different colors to each of these divs.

So let's say red will have a background color of red and then yellow,

same thing,

and finally blue. All right. Cool.

So now if I hit run we should see three squares that are red, I should have renamed this red, yellow and

blue.

So we've got red, yellow and blue, three boxes that are showing up one on top of each other,

because at the moment their position is by default static so they stack and they don't combine into

the same line.

Now the easiest way of making something show up on top of another thing is nesting it.

So say if we put the yellow div, instead of next to, or at the same hierarchical level as the red div, let's

say that we put it inside the red div.

Now this yellow div becomes a child of the red div.

And as we learned from before, children sit on top of their parent.

So the yellow div is currently sitting on top of the red div.

But, other than this, if they were positioned at the same hierarchical level, all the HTML elements

have a natural stacking order.

So that means that whatever comes first in the HTML code, so closer to the top of the file, will be closer

to the back.

And, as you go down in the HTML file, we come further and further forwards towards ourselves and away

from the screen. So I can show you that a little bit better

if I made all the divs position absolute, because at the moment all our divs are not overlapping, they're

occupying a full row all to themselves.

And that's because they are by default position static.

Now if anything that I've just said about positioning is confusing to you at all,

make sure that you go back to the CSS section and check out the lecture on positioning, where we talk

about absolute, relative, static, and all of those things.

Now for this part I'm going to assume that you know what absolute does which is basically take out the

elements out of the HTML flow.

So, if I run it right now, you see that all we have is a single blue div, and that's not true.

It's actually the blue div sitting on top of the yellow div sitting on top of the red div, but because

they're all the same size and they've all been taken out of the HTML flow, they’re now currently all positioned

exactly on top of each other.

But, say if I go into the yellow div and I add a, I don’t know, left 20 margin and a top 20 pixel margin,

and then I maybe go into and maybe I put let's say we'll probably need 40 pixels left and 40 pixels

from the top for the blue div.

Now if I hit run you can see that we've got three divs stacked on top of each other.

It's much easier to see the natural stacking order which is which is if you remember that the things

that come first in the HTML will be right at the back,

and then, as we go down the HTML file, every other element becomes stacked on top of the previous elements.

So this is the natural stacking order,

just based on the order in the HTML code.

So one way of changing the stacking order,

for example if we wanted the yellow div to be on top at the same position as it is right now, we can

move it further down in the HTML code.

So if I hit run you'll see that now yellow is on top.

It's still at the same position in terms of the x and the y,

but in terms of its stacking order it's now the most in front because it's at the bottom of the HTML

file.

Now let's just undo that because there's other ways of changing the stacking order.

You don't really want to have to go into HTML and move bits of code around just in order to

change how it's stacked, right?

You want to use CSS, and in order to use the CSS to change the stacking order, we have to use the

property called the z-index.

So, for example, if we change the z-index of the red div, which is currently the bottom most div, if I

change the z-index to 1 and I hit run, then you'll see that the red div is now brought in front of

all the other divs and it's now the closest to the user and further away from the screen.

Now, what if we change the third div’s z-index? Let’s make it -1.

So before I hit run just remind ourselves that blue is currently second in the stack.

It's yellow then blue then red,

yeah?

So now if we watch this, now that I've changed blue’s z-index to -1, you can see that it now

stacks at the bottom.

It's below the yellow.

So, from this little experiment, you can see that the default z-index for all your elements is actually

0,

because by changing one div’s z-index to 1, we've made it show up above everything else, and by changing

another one’s z-index to -1,

we’ve made it show up behind everything else. But you have to remember that the z-index is just one

of many things that affects the stacking order.

For example, let's say that we change every body's z-index,

so every single element, into -1, so they all have the same z-index.

You can see that we revert back to the original stacking order that is based off the order of our code

in the HTML file.

So red then yellow then blue.

So this is why the stacking order and using the z-index is such a complicated thing, because many many

things affect how your HTML elements stack on the screen. And just to make things even more complicated,

you have to remember that the z-index only works if your elements are positioned, so it has a positioning.

So, if I delete that position property, so all the divs now become positioned statically, i.e. they don't

have an explicit position set,

and then I go into here and I change the z-indexes from, let's say make this one

1, change the middle one to 0,

and the last one to -1,

so what you would expect with this code is that the red div should show up on top, then it's

yellow,

then finally it's blue right at the bottom, so basically reversing the current order.

But you can see, because I deleted that position properties setting to absolute,

it doesn't actually stack.

And even if I forced it to stack it will not obey this order.

Now you might think that it's not working because at the moment my divs are not overlapping but that's

actually not true.

So let's say that if I only make the first div, my red div, positioned absolute, so my red div is now

positioned

absolute. I'm going to delete the z-index from the last div,

so making it revert back to 0. And then I'm going to make the first div have a z-index of 1,

but the second one to have a z-index of 10.

So if the z-index for the yellow div in fact worked then it should be stacked on top of everything.

As you'll see if I hit run,

it doesn't.

And the reason is because it's not positioned, it doesn't have a position relative or a position absolute.

It's still static.

And what I'm trying to show you is that when you have an element that is not positioned, where you haven't

set it to absolute, relative or fixed, then the z-index does not apply.

But as long as we give it a position, let's say relative,

if I hit run you can see it's now on top,

if I change it to absolute you'll see that it's still on top,

if I change it to fixed it's still on top.

So the only one that doesn't work is position static which is the same as no position defined.

So as you can imagine when you're trying to affect the stacking order of your elements on your web site

it can get pretty complicated pretty fast.

But I'm going to help you through this.

I've made a flowchart to help you figure out which element is on top and you can use it to ascertain

between two elements, which one is going to be on top of the other one, and you'll find that this is going

to be pretty helpful as we get onto the challenges.

And let me introduce you to the first challenge.

I want you to use the flow chart and what you've learned about the z-index and stacking order to make

our phone image hide behind the feature section.

And I have to give you a hint. Remember that this section is actually not white.

It's see through by default.

So you need to make this section background color white explicitly if you want it to be able to cover

the image.

Now, with that hint and all of your knowledge that you've gained up till now, plus this pdf that you're

going to be able to download in the resources section for this lesson, I want you to try and give this challenge

a go.

So the outcome that you're aiming for is the image hidden behind this feature section.

So pause the video and give it a go.

All right.

So, in order to change this, we of course have to go into Atom and head over to our styles.css.

Now the image in this case is called title-image, and the second section, the feature section, has an

id of features.

So the first thing that we said that we needed to do was to change the feature section’s background color

to white in order to make sure that it's not transparent at all.

So if it does sit on top of another element it will obscure it.

OK so that's the first part.

And at this point nothing really is going to change. Now the next part is that we have to make the title

image go behind the features.

So what if we changed it's z-index to -1, because, remember, all the elements by default have

a z-index of 0,

so by making something -1 it will make it go behind the other things.

Now remember that in order for the z-index to work we need to do one more thing,

and that's of course setting the position to absolute so that that z-index actually gets activated

and will actually work.

So the next thing is making our feature section go on top of the title image. So we can do that by,

of course, first changing its position to absolute and then changing that z-index to 1.

So now 1 is greater than -1, so features should sit on top of the title image and we should

achieve what we're looking for.

Let's hit save and see what happens when we hit run.

So a couple of things just happened.

The first thing is, remember that we said every element by default has a z-index of zero. By giving

the title image a z-index of -1,

we’ve effectively moved it behind this title section and now we can no longer see it because it's behind

everything else. So we can't have that.

So we have to delete that line.

So what if we just changed the z-index of the features section to make it go on top of the title image?

Well, the other problem that you might spot around here is that our feature section is actually behind

here, and the reason is because we've changed the position of the feature section to absolute.

And remember that takes any HTML element out of the flow of the document,

so it's no longer stacking and following the natural order. So we can’t have that either.

So why don't we change this to relative, which we know will keep the element in the HTML flow, but it will

allow our features to have a position and we can give it a z-index

in that case?

So let's check to see if this configuration would work with our flowchart.

So are they both positioned elements?

Yeah they are.

They're both.

One is absolute.

The other one is relative.

Do they both have a z-index?

No, in this case, because we had to remove the z-index from the title image.

But does one of them have a z-index?

Yes.

Features section has as a z-index.

Does one have a z-index greater than 0?

Yes, one is greater than 0.

So the element with a z-index greater than 0 is going to be on top.

So this should work

if everything else is OK.

So let's hit save and let's go and refresh.

Ah look, it's now working.

Our image is partially hidden behind our feature section and everything else still looks exactly the

way we left it.

So that's pretty good.

And if you got the solution right by using this particular set of CSS properties, then well done.

That's pretty good.

You've understood how the z-index works and I hope the flow chart has been useful. Now,

just for bonus points, if you take a look at the flow chart you'll notice that positioned elements that

come later in the HTML flow are on top even if they don't have a z-index.

So what that means is that we can remove the second z-index here and simply leave it as positioned

relative, because if we check our flow chart with this current configuration, are they both positioned

elements?

Yes.

Do they both have a z-index?

No.

Does one of them have a z-index?

No, actually, in this case neither of them have a z-index.

So we go down to here. Is one below the other in the HTML flow?

Well yes.

Feature section is below the title image.

So the one below in the HTML flow is going to be on top.

So this says that our feature section should be on top even though we haven't actually set a z-index.

So now let's go and refresh our page and you'll see that absolutely nothing has changed, because we've

managed to make the stacking order work the way that we want it to by understanding not just the

z-index, but also how other things affect the stacking order.

So, when you find yourself wanting to adjust the stacking order of elements, I hope that this pdf will

come in handy and you can follow the flow chart to figure out which one is on top.

So there’s just one last thing that I want to adjust before we finish off, and that is, at the moment this title page

feels slightly unbalanced. We’re cutting off a little bit too much of this image, and there's not enough

space between the download buttons and the end of the section.

So I really want to make that padding bottom a little bit larger so that we can push this section down

a little bit more.

So, to achieve that, if we take a look, we can see that our top section, or our title section, is contained

inside a container-fluid. So the container-fluid has a padding top and bottom 3 percent and 15 percent

left and right.

So, if you switch on Pesticide, you can see that all of this is just the container-fluid.

So if we made its padding a little bit larger, but only on the bottom, then we can actually achieve the

effect that we want.

So, for example, if we want to go for a dry run, we can select the container-fluid and change its padding

bottom.

So at the moment it's, what, 43, right?

What if we changed that to, say, I don't know, 100?

Then you can see that this looks a lot more

this looks a lot more appealing seeing just a little bit more of that image and having a little bit

more space.

So let's go ahead and do it for real

inside our style.css.

We're going to change the container-fluid but we want to leave the other values the same.

So I still want 3 percent on the top, 15 percent left and right,

but I'm going to add a 7 percent padding to just the bottom.

So remember when we only have three values for things like padding and margin,

the first one is top,

second one is left and right, and the last one is the bottom.

So if we hit save and we refresh then you can see it's pretty much the same as what we saw previously

when we tried to change it in Chrome Developer Tools.

Now the next thing I want to change is it would be really nice if my image could align on the right

with the end of my menu.

At the moment it looks like it's a little bit too mushed to the left and I would really like to push it

to the right a little bit.

So to do that I can go into my image which is called title-image, and because it's already positioned

absolute and I can specify that it should maybe just be 30 percent from the right.

And if we hit save and refresh then you can see that the margin to the right is now a lot lower and

it's only 30 percent and that distributes a little more to the right and looks a lot better.

Now in the next lesson we're going to talk about another advanced CSS concept, which are responsive breakpoints

and that will allow us to specify exactly how we want the CSS to change depending on the size of the

screen.

So we would be able to create responsive layouts without having to rely solely on the Bootstrap grid

system.

So for all of that and more, I'll see you on the next lesson.