All right. 1
So this is looking pretty awesome already but we can make it look even better. 2
So one of the things that bothers me a little bit is the fact that this image takes up so much space 3
that our top title section is a lot bigger than it needs to be. 4
So what I would like to happen is what if we can make this image show up behind this features page and 5
thereby making this top section more compact and makes our web site look a lot more together. 6
So in order to achieve this look we have to understand a more advanced CSS concept which is the 7
z-index. 8
So we know that each element on screen has a x and y position so we can move this image up or to the 9
right or to the left or downwards. 10
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 11
away from you. 12
So, in order to make this image go behind this feature section, we have to make the image’s z-index 13
lower than this section so that it goes behind this section. 14
Now this is an advanced CSS concept, which is why we're covering it only now. 15
And it's something that even fully fledged web designers and developers understand poorly. 16
So we're going to tackle it at this stage when we've already pretty much gotten to grips with the basic 17
CSS and Bootstrap. 18
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 19
three divs. Let’s call the first one, 20
give it a class of red, and we'll call this one red, and then we'll have a yellow and a blue. 21
So I'm going to make all three of these divs have a height of 100 pixels and a width of 100 pixels. 22
And then I'm going to give them all a border of say 1 pixel solid. 23
And now I'm going to add some different colors to each of these divs. 24
So let's say red will have a background color of red and then yellow, 25
same thing, 26
and finally blue. All right. Cool. 27
So now if I hit run we should see three squares that are red, I should have renamed this red, yellow and 28
blue. 29
So we've got red, yellow and blue, three boxes that are showing up one on top of each other, 30
because at the moment their position is by default static so they stack and they don't combine into 31
the same line. 32
Now the easiest way of making something show up on top of another thing is nesting it. 33
So say if we put the yellow div, instead of next to, or at the same hierarchical level as the red div, let's 34
say that we put it inside the red div. 35
Now this yellow div becomes a child of the red div. 36
And as we learned from before, children sit on top of their parent. 37
So the yellow div is currently sitting on top of the red div. 38
But, other than this, if they were positioned at the same hierarchical level, all the HTML elements 39
have a natural stacking order. 40
So that means that whatever comes first in the HTML code, so closer to the top of the file, will be closer 41
to the back. 42
And, as you go down in the HTML file, we come further and further forwards towards ourselves and away 43
from the screen. So I can show you that a little bit better 44
if I made all the divs position absolute, because at the moment all our divs are not overlapping, they're 45
occupying a full row all to themselves. 46
And that's because they are by default position static. 47
Now if anything that I've just said about positioning is confusing to you at all, 48
make sure that you go back to the CSS section and check out the lecture on positioning, where we talk 49
about absolute, relative, static, and all of those things. 50
Now for this part I'm going to assume that you know what absolute does which is basically take out the 51
elements out of the HTML flow. 52
So, if I run it right now, you see that all we have is a single blue div, and that's not true. 53
It's actually the blue div sitting on top of the yellow div sitting on top of the red div, but because 54
they're all the same size and they've all been taken out of the HTML flow, they’re now currently all positioned 55
exactly on top of each other. 56
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, 57
and then I maybe go into and maybe I put let's say we'll probably need 40 pixels left and 40 pixels 58
from the top for the blue div. 59
Now if I hit run you can see that we've got three divs stacked on top of each other. 60
It's much easier to see the natural stacking order which is which is if you remember that the things 61
that come first in the HTML will be right at the back, 62
and then, as we go down the HTML file, every other element becomes stacked on top of the previous elements. 63
So this is the natural stacking order, 64
just based on the order in the HTML code. 65
So one way of changing the stacking order, 66
for example if we wanted the yellow div to be on top at the same position as it is right now, we can 67
move it further down in the HTML code. 68
So if I hit run you'll see that now yellow is on top. 69
It's still at the same position in terms of the x and the y, 70
but in terms of its stacking order it's now the most in front because it's at the bottom of the HTML 71
file. 72
Now let's just undo that because there's other ways of changing the stacking order. 73
You don't really want to have to go into HTML and move bits of code around just in order to 74
change how it's stacked, right? 75
You want to use CSS, and in order to use the CSS to change the stacking order, we have to use the 76
property called the z-index. 77
So, for example, if we change the z-index of the red div, which is currently the bottom most div, if I 78
change the z-index to 1 and I hit run, then you'll see that the red div is now brought in front of 79
all the other divs and it's now the closest to the user and further away from the screen. 80
Now, what if we change the third div’s z-index? Let’s make it -1. 81
So before I hit run just remind ourselves that blue is currently second in the stack. 82
It's yellow then blue then red, 83
yeah? 84
So now if we watch this, now that I've changed blue’s z-index to -1, you can see that it now 85
stacks at the bottom. 86
It's below the yellow. 87
So, from this little experiment, you can see that the default z-index for all your elements is actually 88
0, 89
because by changing one div’s z-index to 1, we've made it show up above everything else, and by changing 90
another one’s z-index to -1, 91
we’ve made it show up behind everything else. But you have to remember that the z-index is just one 92
of many things that affects the stacking order. 93
For example, let's say that we change every body's z-index, 94
so every single element, into -1, so they all have the same z-index. 95
You can see that we revert back to the original stacking order that is based off the order of our code 96
in the HTML file. 97
So red then yellow then blue. 98
So this is why the stacking order and using the z-index is such a complicated thing, because many many 99
things affect how your HTML elements stack on the screen. And just to make things even more complicated, 100
you have to remember that the z-index only works if your elements are positioned, so it has a positioning. 101
So, if I delete that position property, so all the divs now become positioned statically, i.e. they don't 102
have an explicit position set, 103
and then I go into here and I change the z-indexes from, let's say make this one 104
1, change the middle one to 0, 105
and the last one to -1, 106
so what you would expect with this code is that the red div should show up on top, then it's 107
yellow, 108
then finally it's blue right at the bottom, so basically reversing the current order. 109
But you can see, because I deleted that position properties setting to absolute, 110
it doesn't actually stack. 111
And even if I forced it to stack it will not obey this order. 112
Now you might think that it's not working because at the moment my divs are not overlapping but that's 113
actually not true. 114
So let's say that if I only make the first div, my red div, positioned absolute, so my red div is now 115
positioned 116
absolute. I'm going to delete the z-index from the last div, 117
so making it revert back to 0. And then I'm going to make the first div have a z-index of 1, 118
but the second one to have a z-index of 10. 119
So if the z-index for the yellow div in fact worked then it should be stacked on top of everything. 120
As you'll see if I hit run, 121
it doesn't. 122
And the reason is because it's not positioned, it doesn't have a position relative or a position absolute. 123
It's still static. 124
And what I'm trying to show you is that when you have an element that is not positioned, where you haven't 125
set it to absolute, relative or fixed, then the z-index does not apply. 126
But as long as we give it a position, let's say relative, 127
if I hit run you can see it's now on top, 128
if I change it to absolute you'll see that it's still on top, 129
if I change it to fixed it's still on top. 130
So the only one that doesn't work is position static which is the same as no position defined. 131
So as you can imagine when you're trying to affect the stacking order of your elements on your web site 132
it can get pretty complicated pretty fast. 133
But I'm going to help you through this. 134
I've made a flowchart to help you figure out which element is on top and you can use it to ascertain 135
between two elements, which one is going to be on top of the other one, and you'll find that this is going 136
to be pretty helpful as we get onto the challenges. 137
And let me introduce you to the first challenge. 138
I want you to use the flow chart and what you've learned about the z-index and stacking order to make 139
our phone image hide behind the feature section. 140
And I have to give you a hint. Remember that this section is actually not white. 141
It's see through by default. 142
So you need to make this section background color white explicitly if you want it to be able to cover 143
the image. 144
Now, with that hint and all of your knowledge that you've gained up till now, plus this pdf that you're 145
going to be able to download in the resources section for this lesson, I want you to try and give this challenge 146
a go. 147
So the outcome that you're aiming for is the image hidden behind this feature section. 148
So pause the video and give it a go. 149
All right. 150
So, in order to change this, we of course have to go into Atom and head over to our styles.css. 151
Now the image in this case is called title-image, and the second section, the feature section, has an 152
id of features. 153
So the first thing that we said that we needed to do was to change the feature section’s background color 154
to white in order to make sure that it's not transparent at all. 155
So if it does sit on top of another element it will obscure it. 156
OK so that's the first part. 157
And at this point nothing really is going to change. Now the next part is that we have to make the title 158
image go behind the features. 159
So what if we changed it's z-index to -1, because, remember, all the elements by default have 160
a z-index of 0, 161
so by making something -1 it will make it go behind the other things. 162
Now remember that in order for the z-index to work we need to do one more thing, 163
and that's of course setting the position to absolute so that that z-index actually gets activated 164
and will actually work. 165
So the next thing is making our feature section go on top of the title image. So we can do that by, 166
of course, first changing its position to absolute and then changing that z-index to 1. 167
So now 1 is greater than -1, so features should sit on top of the title image and we should 168
achieve what we're looking for. 169
Let's hit save and see what happens when we hit run. 170
So a couple of things just happened. 171
The first thing is, remember that we said every element by default has a z-index of zero. By giving 172
the title image a z-index of -1, 173
we’ve effectively moved it behind this title section and now we can no longer see it because it's behind 174
everything else. So we can't have that. 175
So we have to delete that line. 176
So what if we just changed the z-index of the features section to make it go on top of the title image? 177
Well, the other problem that you might spot around here is that our feature section is actually behind 178
here, and the reason is because we've changed the position of the feature section to absolute. 179
And remember that takes any HTML element out of the flow of the document, 180
so it's no longer stacking and following the natural order. So we can’t have that either. 181
So why don't we change this to relative, which we know will keep the element in the HTML flow, but it will 182
allow our features to have a position and we can give it a z-index 183
in that case? 184
So let's check to see if this configuration would work with our flowchart. 185
So are they both positioned elements? 186
Yeah they are. 187
They're both. 188
One is absolute. 189
The other one is relative. 190
Do they both have a z-index? 191
No, in this case, because we had to remove the z-index from the title image. 192
But does one of them have a z-index? 193
Yes. 194
Features section has as a z-index. 195
Does one have a z-index greater than 0? 196
Yes, one is greater than 0. 197
So the element with a z-index greater than 0 is going to be on top. 198
So this should work 199
if everything else is OK. 200
So let's hit save and let's go and refresh. 201
Ah look, it's now working. 202
Our image is partially hidden behind our feature section and everything else still looks exactly the 203
way we left it. 204
So that's pretty good. 205
And if you got the solution right by using this particular set of CSS properties, then well done. 206
That's pretty good. 207
You've understood how the z-index works and I hope the flow chart has been useful. Now, 208
just for bonus points, if you take a look at the flow chart you'll notice that positioned elements that 209
come later in the HTML flow are on top even if they don't have a z-index. 210
So what that means is that we can remove the second z-index here and simply leave it as positioned 211
relative, because if we check our flow chart with this current configuration, are they both positioned 212
elements? 213
Yes. 214
Do they both have a z-index? 215
No. 216
Does one of them have a z-index? 217
No, actually, in this case neither of them have a z-index. 218
So we go down to here. Is one below the other in the HTML flow? 219
Well yes. 220
Feature section is below the title image. 221
So the one below in the HTML flow is going to be on top. 222
So this says that our feature section should be on top even though we haven't actually set a z-index. 223
So now let's go and refresh our page and you'll see that absolutely nothing has changed, because we've 224
managed to make the stacking order work the way that we want it to by understanding not just the 225
z-index, but also how other things affect the stacking order. 226
So, when you find yourself wanting to adjust the stacking order of elements, I hope that this pdf will 227
come in handy and you can follow the flow chart to figure out which one is on top. 228
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 229
feels slightly unbalanced. We’re cutting off a little bit too much of this image, and there's not enough 230
space between the download buttons and the end of the section. 231
So I really want to make that padding bottom a little bit larger so that we can push this section down 232
a little bit more. 233
So, to achieve that, if we take a look, we can see that our top section, or our title section, is contained 234
inside a container-fluid. So the container-fluid has a padding top and bottom 3 percent and 15 percent 235
left and right. 236
So, if you switch on Pesticide, you can see that all of this is just the container-fluid. 237
So if we made its padding a little bit larger, but only on the bottom, then we can actually achieve the 238
effect that we want. 239
So, for example, if we want to go for a dry run, we can select the container-fluid and change its padding 240
bottom. 241
So at the moment it's, what, 43, right? 242
What if we changed that to, say, I don't know, 100? 243
Then you can see that this looks a lot more 244
this looks a lot more appealing seeing just a little bit more of that image and having a little bit 245
more space. 246
So let's go ahead and do it for real 247
inside our style.css. 248
We're going to change the container-fluid but we want to leave the other values the same. 249
So I still want 3 percent on the top, 15 percent left and right, 250
but I'm going to add a 7 percent padding to just the bottom. 251
So remember when we only have three values for things like padding and margin, 252
the first one is top, 253
second one is left and right, and the last one is the bottom. 254
So if we hit save and we refresh then you can see it's pretty much the same as what we saw previously 255
when we tried to change it in Chrome Developer Tools. 256
Now the next thing I want to change is it would be really nice if my image could align on the right 257
with the end of my menu. 258
At the moment it looks like it's a little bit too mushed to the left and I would really like to push it 259
to the right a little bit. 260
So to do that I can go into my image which is called title-image, and because it's already positioned 261
absolute and I can specify that it should maybe just be 30 percent from the right. 262
And if we hit save and refresh then you can see that the margin to the right is now a lot lower and 263
it's only 30 percent and that distributes a little more to the right and looks a lot better. 264
Now in the next lesson we're going to talk about another advanced CSS concept, which are responsive breakpoints 265
and that will allow us to specify exactly how we want the CSS to change depending on the size of the 266
screen. 267
So we would be able to create responsive layouts without having to rely solely on the Bootstrap grid 268
system. 269
So for all of that and more, I'll see you on the next lesson.