Original subtitles

0 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.