WEBVTT

0
00:00.610 --> 00:01.200
All right.

1
00:01.210 --> 00:08.930
So this is looking pretty awesome already but we can make it look even better.

2
00:09.120 --> 00:16.200
So one of the things that bothers me a little bit is the fact that this image takes up so much space

3
00:16.530 --> 00:22.230
that our top title section is a lot bigger than it needs to be.

4
00:22.230 --> 00:31.950
So what I would like to happen is what if we can make this image show up behind this features page and

5
00:31.950 --> 00:38.090
thereby making this top section more compact and makes our web site look a lot more together.

6
00:38.460 --> 00:46.470
So in order to achieve this look we have to understand a more advanced CSS concept which is the 

7
00:46.470 --> 00:47.140
z-index.

8
00:47.220 --> 00:55.440
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
00:55.440 --> 00:57.990
right or to the left or downwards.

10
00:57.990 --> 01:06.150
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
01:06.210 --> 01:07.510
away from you.

12
01:07.740 --> 01:15.540
So, in order to make this image go behind this feature section, we have to make the image’s z-index

13
01:15.840 --> 01:20.990
lower than this section so that it goes behind this section.

14
01:20.990 --> 01:25.950
Now this is an advanced CSS concept, which is why we're covering it only now.

15
01:26.280 --> 01:31.500
And it's something that even fully fledged web designers and developers understand poorly.

16
01:31.500 --> 01:37.140
So we're going to tackle it at this stage when we've already pretty much gotten to grips with the basic

17
01:37.190 --> 01:39.400
CSS and Bootstrap.

18
01:39.420 --> 01:45.480
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
01:45.480 --> 01:48.240
three divs. Let’s call the first one,

20
01:48.270 --> 02:00.550
give it a class of red, and we'll call this one red, and then we'll have a yellow and a blue.

21
02:01.020 --> 02:12.000
So I'm going to make all three of these divs have a height of 100 pixels and a width of 100 pixels.

22
02:13.170 --> 02:19.580
And then I'm going to give them all a border of say 1 pixel solid.

23
02:19.820 --> 02:25.110
And now I'm going to add some different colors to each of these divs.

24
02:25.330 --> 02:35.420
So let's say red will have a background color of red and then yellow,

25
02:35.500 --> 02:38.190
same thing,

26
02:38.290 --> 02:42.430
and finally blue. All right. Cool.

27
02:42.450 --> 02:53.790
So now if I hit run we should see three squares that are red, I should have renamed this red, yellow and

28
02:54.720 --> 02:55.160
blue.

29
02:55.320 --> 03:01.370
So we've got red, yellow and blue, three boxes that are showing up one on top of each other,

30
03:01.620 --> 03:08.220
because at the moment their position is by default static so they stack and they don't combine into

31
03:08.220 --> 03:09.840
the same line.

32
03:09.840 --> 03:16.050
Now the easiest way of making something show up on top of another thing is nesting it.

33
03:16.080 --> 03:23.040
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
03:23.040 --> 03:25.520
say that we put it inside the red div.

35
03:25.620 --> 03:29.960
Now this yellow div becomes a child of the red div.

36
03:29.970 --> 03:34.560
And as we learned from before, children sit on top of their parent.

37
03:34.590 --> 03:39.660
So the yellow div is currently sitting on top of the red div.

38
03:39.690 --> 03:46.380
But, other than this, if they were positioned at the same hierarchical level, all the HTML elements

39
03:46.440 --> 03:48.730
have a natural stacking order.

40
03:48.810 --> 03:56.050
So that means that whatever comes first in the HTML code, so closer to the top of the file, will be closer

41
03:56.070 --> 03:57.260
to the back.

42
03:57.480 --> 04:04.020
And, as you go down in the HTML file, we come further and further forwards towards ourselves and away

43
04:04.020 --> 04:06.740
from the screen. So I can show you that a little bit better

44
04:06.780 --> 04:15.540
if I made all the divs position absolute, because at the moment all our divs are not overlapping, they're

45
04:15.540 --> 04:18.670
occupying a full row all to themselves.

46
04:18.750 --> 04:21.810
And that's because they are by default position static.

47
04:21.810 --> 04:25.880
Now if anything that I've just said about positioning is confusing to you at all,

48
04:25.950 --> 04:32.910
make sure that you go back to the CSS section and check out the lecture on positioning, where we talk

49
04:32.910 --> 04:36.370
about absolute, relative, static, and all of those things.

50
04:36.390 --> 04:41.220
Now for this part I'm going to assume that you know what absolute does which is basically take out the

51
04:41.220 --> 04:43.950
elements out of the HTML flow.

52
04:43.950 --> 04:50.610
So, if I run it right now, you see that all we have is a single blue div, and that's not true.

53
04:50.610 --> 04:56.460
It's actually the blue div sitting on top of the yellow div sitting on top of the red div, but because

54
04:56.460 --> 05:02.310
they're all the same size and they've all been taken out of the HTML flow, they’re now currently all positioned

55
05:02.370 --> 05:04.400
exactly on top of each other.

56
05:04.500 --> 05:13.680
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
05:14.040 --> 05:25.290
and then I maybe go into and maybe I put let's say we'll probably need 40 pixels left and 40 pixels

58
05:26.070 --> 05:29.480
from the top for the blue div.

59
05:29.490 --> 05:34.670
Now if I hit run you can see that we've got three divs stacked on top of each other.

60
05:34.680 --> 05:41.010
It's much easier to see the natural stacking order which is which is if you remember that the things

61
05:41.040 --> 05:46.110
that come first in the HTML will be right at the back,

62
05:46.200 --> 05:54.120
and then, as we go down the HTML file, every other element becomes stacked on top of the previous elements.

63
05:54.120 --> 05:57.840
So this is the natural stacking order,

64
05:57.930 --> 06:00.870
just based on the order in the HTML code.

65
06:00.900 --> 06:03.270
So one way of changing the stacking order,

66
06:03.270 --> 06:09.600
for example if we wanted the yellow div to be on top at the same position as it is right now, we can

67
06:09.600 --> 06:12.680
move it further down in the HTML code.

68
06:12.690 --> 06:15.900
So if I hit run you'll see that now yellow is on top.

69
06:15.900 --> 06:19.980
It's still at the same position in terms of the x and the y,

70
06:20.070 --> 06:27.960
but in terms of its stacking order it's now the most in front because it's at the bottom of the HTML 

71
06:27.990 --> 06:29.040
file.

72
06:29.040 --> 06:34.750
Now let's just undo that because there's other ways of changing the stacking order.

73
06:34.800 --> 06:40.650
You don't really want to have to go into HTML and move bits of code around just in order to

74
06:40.650 --> 06:42.510
change how it's stacked, right?

75
06:42.510 --> 06:49.470
You want to use CSS, and in order to use the CSS to change the stacking order, we have to use the

76
06:49.470 --> 06:51.650
property called the z-index.

77
06:51.810 --> 07:01.470
So, for example, if we change the z-index of the red div, which is currently the bottom most div, if I

78
07:01.470 --> 07:10.980
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
07:11.070 --> 07:18.150
all the other divs and it's now the closest to the user and further away from the screen.

80
07:18.150 --> 07:22.740
Now, what if we change the third div’s z-index? Let’s make it -1.

81
07:22.740 --> 07:27.630
So before I hit run just remind ourselves that blue is currently second in the stack.

82
07:27.630 --> 07:29.570
It's yellow then blue then red,

83
07:29.580 --> 07:30.010
yeah?

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

85
07:36.240 --> 07:38.100
stacks at the bottom.

86
07:38.190 --> 07:40.040
It's below the yellow.

87
07:40.200 --> 07:46.500
So, from this little experiment, you can see that the default z-index for all your elements is actually

88
07:46.500 --> 07:47.280
0,

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

90
07:54.470 --> 07:56.820
another one’s z-index to -1,

91
07:56.870 --> 08:03.320
we’ve made it show up behind everything else. But you have to remember that the z-index is just one

92
08:03.350 --> 08:06.580
of many things that affects the stacking order.

93
08:06.590 --> 08:10.360
For example, let's say that we change every body's z-index,

94
08:10.360 --> 08:16.760
so every single element, into -1, so they all have the same z-index.

95
08:16.760 --> 08:24.080
You can see that we revert back to the original stacking order that is based off the order of our code

96
08:24.110 --> 08:25.370
in the HTML file.

97
08:25.370 --> 08:27.840
So red then yellow then blue.

98
08:27.890 --> 08:34.730
So this is why the stacking order and using the z-index is such a complicated thing, because many many

99
08:34.730 --> 08:42.770
things affect how your HTML elements stack on the screen. And just to make things even more complicated,

100
08:42.800 --> 08:50.790
you have to remember that the z-index only works if your elements are positioned, so it has a positioning.

101
08:50.870 --> 08:57.890
So, if I delete that position property, so all the divs now become positioned statically, i.e. they don't

102
08:57.890 --> 09:00.790
have an explicit position set,

103
09:01.070 --> 09:08.650
and then I go into here and I change the z-indexes from, let's say make this one

104
09:08.800 --> 09:11.560
1, change the middle one to 0,

105
09:11.600 --> 09:13.550
and the last one to -1,

106
09:13.550 --> 09:19.580
so what you would expect with this code is that the red div should show up on top, then it's

107
09:19.580 --> 09:20.120
yellow,

108
09:20.120 --> 09:24.300
then finally it's blue right at the bottom, so basically reversing the current order.

109
09:24.590 --> 09:29.260
But you can see, because I deleted that position properties setting to absolute,

110
09:29.420 --> 09:31.340
it doesn't actually stack.

111
09:31.580 --> 09:35.810
And even if I forced it to stack it will not obey this order.

112
09:35.810 --> 09:41.390
Now you might think that it's not working because at the moment my divs are not overlapping but that's

113
09:41.390 --> 09:42.880
actually not true.

114
09:43.010 --> 09:55.640
So let's say that if I only make the first div, my red div, positioned absolute, so my red div is now

115
09:55.640 --> 09:56.300
positioned

116
09:56.420 --> 10:00.740
absolute. I'm going to delete the z-index from the last div,

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

118
10:10.730 --> 10:15.710
but the second one to have a z-index of 10.

119
10:15.710 --> 10:22.810
So if the z-index for the yellow div in fact worked then it should be stacked on top of everything.

120
10:23.030 --> 10:24.950
As you'll see if I hit run,

121
10:25.130 --> 10:26.210
it doesn't.

122
10:26.210 --> 10:32.860
And the reason is because it's not positioned, it doesn't have a position relative or a position absolute.

123
10:32.990 --> 10:34.630
It's still static.

124
10:34.640 --> 10:41.240
And what I'm trying to show you is that when you have an element that is not positioned, where you haven't

125
10:41.240 --> 10:47.240
set it to absolute, relative or fixed, then the z-index does not apply.

126
10:47.390 --> 10:53.560
But as long as we give it a position, let's say relative,

127
10:53.870 --> 10:56.340
if I hit run you can see it's now on top,

128
10:56.480 --> 11:01.280
if I change it to absolute you'll see that it's still on top,

129
11:01.280 --> 11:06.270
if I change it to fixed it's still on top.

130
11:06.290 --> 11:12.810
So the only one that doesn't work is position static which is the same as no position defined.

131
11:12.840 --> 11:18.620
So as you can imagine when you're trying to affect the stacking order of your elements on your web site

132
11:18.680 --> 11:22.040
it can get pretty complicated pretty fast.

133
11:22.040 --> 11:23.920
But I'm going to help you through this.

134
11:24.020 --> 11:31.370
I've made a flowchart to help you figure out which element is on top and you can use it to ascertain

135
11:31.610 --> 11:37.850
between two elements, which one is going to be on top of the other one, and you'll find that this is going

136
11:37.850 --> 11:41.730
to be pretty helpful as we get onto the challenges.

137
11:41.830 --> 11:44.250
And let me introduce you to the first challenge.

138
11:44.390 --> 11:50.600
I want you to use the flow chart and what you've learned about the z-index and stacking order to make

139
11:50.690 --> 11:56.580
our phone image hide behind the feature section.

140
11:56.690 --> 12:01.550
And I have to give you a hint. Remember that this section is actually not white.

141
12:01.550 --> 12:03.650
It's see through by default.

142
12:03.650 --> 12:10.670
So you need to make this section background color white explicitly if you want it to be able to cover

143
12:10.670 --> 12:11.840
the image.

144
12:11.840 --> 12:17.480
Now, with that hint and all of your knowledge that you've gained up till now, plus this pdf that you're

145
12:17.480 --> 12:23.600
going to be able to download in the resources section for this lesson, I want you to try and give this challenge

146
12:23.660 --> 12:24.410
a go.

147
12:24.620 --> 12:31.390
So the outcome that you're aiming for is the image hidden behind this feature section.

148
12:31.430 --> 12:33.780
So pause the video and give it a go.

149
12:36.660 --> 12:36.990
All right.

150
12:36.990 --> 12:43.260
So, in order to change this, we of course have to go into Atom and head over to our styles.css.

151
12:43.260 --> 12:53.160
Now the image in this case is called title-image, and the second section, the feature section, has an

152
12:53.160 --> 12:55.360
id of features.

153
12:55.440 --> 13:01.680
So the first thing that we said that we needed to do was to change the feature section’s background color

154
13:02.160 --> 13:07.120
to white in order to make sure that it's not transparent at all.

155
13:07.140 --> 13:11.450
So if it does sit on top of another element it will obscure it.

156
13:11.850 --> 13:13.540
OK so that's the first part.

157
13:13.590 --> 13:20.370
And at this point nothing really is going to change. Now the next part is that we have to make the title

158
13:20.370 --> 13:23.830
image go behind the features.

159
13:23.850 --> 13:32.460
So what if we changed it's z-index to -1, because, remember, all the elements by default have

160
13:32.460 --> 13:34.090
a z-index of 0,

161
13:34.260 --> 13:38.760
so by making something -1 it will make it go behind the other things.

162
13:38.760 --> 13:44.730
Now remember that in order for the z-index to work we need to do one more thing,

163
13:44.790 --> 13:52.320
and that's of course setting the position to absolute so that that z-index actually gets activated

164
13:52.680 --> 13:54.450
and will actually work.

165
13:54.690 --> 14:03.730
So the next thing is making our feature section go on top of the title image. So we can do that by,

166
14:03.750 --> 14:11.320
of course, first changing its position to absolute and then changing that z-index to 1.

167
14:11.340 --> 14:19.440
So now 1 is greater than -1, so features should sit on top of the title image and we should

168
14:19.440 --> 14:21.140
achieve what we're looking for.

169
14:21.300 --> 14:26.060
Let's hit save and see what happens when we hit run.

170
14:26.070 --> 14:28.090
So a couple of things just happened.

171
14:28.110 --> 14:35.070
The first thing is, remember that we said every element by default has a z-index of zero. By giving

172
14:35.070 --> 14:37.880
the title image a z-index of -1,

173
14:38.070 --> 14:45.480
we’ve effectively moved it behind this title section and now we can no longer see it because it's behind

174
14:45.510 --> 14:47.640
everything else. So we can't have that.

175
14:47.640 --> 14:49.300
So we have to delete that line.

176
14:49.530 --> 14:56.010
So what if we just changed the z-index of the features section to make it go on top of the title image?

177
14:56.190 --> 15:02.370
Well, the other problem that you might spot around here is that our feature section is actually behind

178
15:02.430 --> 15:10.140
here, and the reason is because we've changed the position of the feature section to absolute.

179
15:10.200 --> 15:15.170
And remember that takes any HTML element out of the flow of the document,

180
15:15.390 --> 15:20.850
so it's no longer stacking and following the natural order. So we can’t have that either.

181
15:20.850 --> 15:29.790
So why don't we change this to relative, which we know will keep the element in the HTML flow, but it will

182
15:29.820 --> 15:34.970
allow our features to have a position and we can give it a z-index

183
15:34.980 --> 15:36.130
in that case?

184
15:36.240 --> 15:40.760
So let's check to see if this configuration would work with our flowchart.

185
15:41.040 --> 15:43.830
So are they both positioned elements?

186
15:43.840 --> 15:44.820
Yeah they are.

187
15:44.820 --> 15:45.360
They're both.

188
15:45.360 --> 15:46.290
One is absolute.

189
15:46.290 --> 15:47.970
The other one is relative.

190
15:48.110 --> 15:50.160
Do they both have a z-index?

191
15:50.160 --> 15:54.600
No, in this case, because we had to remove the z-index from the title image.

192
15:54.870 --> 15:57.210
But does one of them have a z-index?

193
15:57.270 --> 15:57.750
Yes.

194
15:57.750 --> 16:00.240
Features section has as a z-index.

195
16:00.240 --> 16:03.440
Does one have a z-index greater than 0?

196
16:03.540 --> 16:05.620
Yes, one is greater than 0.

197
16:05.790 --> 16:09.940
So the element with a z-index greater than 0 is going to be on top.

198
16:10.080 --> 16:11.750
So this should work

199
16:11.790 --> 16:13.620
if everything else is OK.

200
16:13.800 --> 16:17.650
So let's hit save and let's go and refresh.

201
16:17.760 --> 16:20.540
Ah look, it's now working.

202
16:20.550 --> 16:27.780
Our image is partially hidden behind our feature section and everything else still looks exactly the

203
16:27.780 --> 16:29.110
way we left it.

204
16:29.160 --> 16:30.910
So that's pretty good.

205
16:30.930 --> 16:37.270
And if you got the solution right by using this particular set of CSS properties, then well done.

206
16:37.390 --> 16:38.480
That's pretty good.

207
16:38.500 --> 16:44.360
You've understood how the z-index works and I hope the flow chart has been useful. Now,

208
16:44.370 --> 16:51.510
just for bonus points, if you take a look at the flow chart you'll notice that positioned elements that

209
16:51.510 --> 16:58.840
come later in the HTML flow are on top even if they don't have a z-index.

210
16:58.950 --> 17:08.640
So what that means is that we can remove the second z-index here and simply leave it as positioned

211
17:08.700 --> 17:15.150
relative, because if we check our flow chart with this current configuration, are they both positioned

212
17:15.210 --> 17:16.020
elements?

213
17:16.020 --> 17:16.850
Yes.

214
17:16.980 --> 17:19.470
Do they both have a z-index?

215
17:19.470 --> 17:21.040
No.

216
17:21.060 --> 17:22.710
Does one of them have a z-index?

217
17:22.710 --> 17:25.900
No, actually, in this case neither of them have a z-index.

218
17:25.950 --> 17:31.130
So we go down to here. Is one below the other in the HTML flow?

219
17:31.260 --> 17:32.180
Well yes.

220
17:32.190 --> 17:35.310
Feature section is below the title image.

221
17:35.310 --> 17:39.480
So the one below in the HTML flow is going to be on top.

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

223
17:48.430 --> 17:55.510
So now let's go and refresh our page and you'll see that absolutely nothing has changed, because we've

224
17:55.510 --> 18:01.840
managed to make the stacking order work the way that we want it to by understanding not just the 

225
18:01.840 --> 18:05.730
z-index, but also how other things affect the stacking order.

226
18:05.860 --> 18:12.280
So, when you find yourself wanting to adjust the stacking order of elements, I hope that this pdf will

227
18:12.280 --> 18:17.810
come in handy and you can follow the flow chart to figure out which one is on top.

228
18:17.800 --> 18:25.180
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
18:25.180 --> 18:30.460
feels slightly unbalanced. We’re cutting off a little bit too much of this image, and there's not enough

230
18:30.460 --> 18:34.900
space between the download buttons and the end of the section.

231
18:35.020 --> 18:39.880
So I really want to make that padding bottom a little bit larger so that we can push this section down

232
18:39.940 --> 18:41.060
a little bit more.

233
18:41.290 --> 18:48.610
So, to achieve that, if we take a look, we can see that our top section, or our title section, is contained

234
18:48.640 --> 18:57.220
inside a container-fluid. So the container-fluid has a padding top and bottom 3 percent and 15 percent

235
18:57.220 --> 18:57.990
left and right.

236
18:58.090 --> 19:03.850
So, if you switch on Pesticide, you can see that all of this is just the container-fluid.

237
19:03.850 --> 19:09.640
So if we made its padding a little bit larger, but only on the bottom, then we can actually achieve the

238
19:09.640 --> 19:11.140
effect that we want.

239
19:11.140 --> 19:18.820
So, for example, if we want to go for a dry run, we can select the container-fluid and change its padding

240
19:18.910 --> 19:19.580
bottom.

241
19:19.720 --> 19:22.230
So at the moment it's, what, 43, right?

242
19:22.240 --> 19:25.830
What if we changed that to, say, I don't know, 100?

243
19:25.960 --> 19:30.130
Then you can see that this looks a lot more

244
19:30.220 --> 19:35.590
this looks a lot more appealing seeing just a little bit more of that image and having a little bit

245
19:35.590 --> 19:36.650
more space.

246
19:36.700 --> 19:38.550
So let's go ahead and do it for real

247
19:38.560 --> 19:40.620
inside our style.css.

248
19:40.750 --> 19:45.410
We're going to change the container-fluid but we want to leave the other values the same.

249
19:45.460 --> 19:49.170
So I still want 3 percent on the top, 15 percent left and right,

250
19:49.390 --> 19:54.460
but I'm going to add a 7 percent padding to just the bottom.

251
19:54.460 --> 19:58.690
So remember when we only have three values for things like padding and margin,

252
19:58.690 --> 20:00.300
the first one is top,

253
20:00.340 --> 20:03.670
second one is left and right, and the last one is the bottom.

254
20:03.670 --> 20:10.660
So if we hit save and we refresh then you can see it's pretty much the same as what we saw previously

255
20:10.720 --> 20:14.070
when we tried to change it in Chrome Developer Tools.

256
20:14.090 --> 20:21.340
Now the next thing I want to change is it would be really nice if my image could align on the right

257
20:21.670 --> 20:23.820
with the end of my menu.

258
20:23.920 --> 20:29.560
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
20:29.890 --> 20:31.390
to the right a little bit.

260
20:31.510 --> 20:38.950
So to do that I can go into my image which is called title-image, and because it's already positioned

261
20:39.010 --> 20:47.680
absolute and I can specify that it should maybe just be 30 percent from the right.

262
20:47.680 --> 20:54.640
And if we hit save and refresh then you can see that the margin to the right is now a lot lower and

263
20:54.640 --> 21:00.410
it's only 30 percent and that distributes a little more to the right and looks a lot better.

264
21:00.460 --> 21:08.010
Now in the next lesson we're going to talk about another advanced CSS concept, which are responsive breakpoints

265
21:08.340 --> 21:16.360
and that will allow us to specify exactly how we want the CSS to change depending on the size of the

266
21:16.360 --> 21:17.370
screen.

267
21:17.620 --> 21:23.710
So we would be able to create responsive layouts without having to rely solely on the Bootstrap grid

268
21:23.710 --> 21:24.700
system.

269
21:24.700 --> 21:28.080
So for all of that and more, I'll see you on the next lesson.