Now, so far we've seen a lot of different intermediate concepts already in this section. 1
Now I want to talk about something that is related to the positioning of elements on screen. 2
And there are four different types that we're going to go through Relative, Absolute Fixed and Static 3
positioning. 4
When developers don't understand positioning or in this case, when building developers don't understand 5
positioning, something like this might happen either on your building, which is terrible, or on your 6
website, which is also not great. 7
So we're going to understand this concept in order for this to not happen. 8
Now, if you're doing renovation work in your builders are doing this, then I'm not sure this video 9
is going to help, but it's definitely going to help us position our items in our websites a lot better. 10
As I mentioned, there are four different values for that property position. 11
It's static, relative, absolute and fixed. 12
And I want to show you how each of these values work and consider when you would need them. 13
So the first one is Static positioning, and this is actually the HTML default. 14
As soon as you insert any piece of HTML by default, they're going to have this particular positioning 15
applied to them. 16
And this basically means that each item flows as they would in our HTML. 17
Now, if you head over to this website appbrewery.github.io/css-positioning, then you 18
can see that I've created a demo website for you to interactively see what each of these different styles 19
of positioning would look like. 20
Now, if the font here is too small because I needed to get enough space in here to scroll, feel free 21
to go to view and then click on zoom in and press the plus button until it fits whichever size your 22
eyes require. 23
Once you're here, you can click on the different styles of positioning, and the first style is static 24
positioning. 25
We can set the position property to a value of static, but we also don't have to, 26
this is just applied by default. 27
In this case, this is just what default HTML does when you add another item here, 28
so, in this case, I've got a div here which I've colored green, 29
once this has been added, it just goes at the bottom of whatever previous element there is and you 30
can see this quite easily if you've installed the pesticide Chrome plugin. 31
Previously I showed you how to get hold of the pesticide chrome extension and now if we hold down our 32
control key, you can see we've got an "h2" here, and then we've got a "code" element here, 33
and then finally we've got a div element here. 34
So notice how that div just goes right at the end of whatever previous element there is. 35
And we can also inspect the code here to see this is where it is, and it simply just continues in the 36
default positioning. 37
This is what static does. 38
It's just what you've seen so far. 39
Now what's more interesting are the other three different types and one of the most common ones you're 40
going to come across that you're probably going to use is Relative positioning. 41
And this is where an item gets positioned relative to its default position. 42
Remember, previously in our static positioning, I told you that HTML just makes your items go one on top 43
of the other with almost no space in between unless there is some sort of default. 44
Well, relative positioning, basically takes that original position and you can apply some changes to 45
it. 46
So you can move it relative to where it should be. 47
So in this case, where the purple box is, is where it should be and where the blue boxes, it's been 48
shifted to be pushed from the left and from the top. 49
So that gets this new relative position. 50
Again, coming back to our website, if we select relative positioning, notice how these two other 51
parts of our code now is relevant. 52
We've got a push from the left and a push from the top. 53
Whereas originally this box was supposed to be somewhere here-ish. 54
I'm just going to draw a dashed line for where it was when we had the static positioning. 55
This is where it's supposed to be. 56
Instead, we've moved it 50px from the left using this line, and then we've moved it 50px 57
from the top using this line. 58
And this works because it is positioned relative to the original supposed location. 59
So now if we select this box, you can see it has position, relative left 50px, top 50px. 60
And this box, if we select it, you can see it has position static, which means that the left and 61
the top, it doesn't actually do anything because it's static position. 62
So it's just default position. 63
It doesn't matter if you add these properties, which you can, it just doesn't do anything. 64
That's the difference between relative and static positioning. 65
Relative positioning takes the static position and then you can move it relative to that location. 66
Now, remember, relative does not mean relative to anything else, 67
it's relative to its supposed location. 68
Some people get that confused and they think it's relative to something else on screen, 69
no. No. 70
We're going to remember this when you use relative positioning. 71
Now, the next type is Absolute positioning, and this makes the position relative to the nearest positioned 72
ancestor. 73
Now, this sentence is a little bit confusing, but remember, in the previous lesson we spoke about 74
the ancestors. 75
So for example, if I had a div here that is a purple box and inside that purple box I put in another 76
div, which is a blue box. 77
Well, in this case the blue box is a descendant and the purple box is an ancestor. 78
If this particular div has the position property set, for example, if we set this as relative and 79
we set the blue box to have a position as absolute, then this blue box is then going to be positioned 80
relative to its positioned ancestor. 81
And notice the wording here, 82
the nearest ancestor, it could have multiple ancestors with position relative, but it's the nearest 83
one that matters. 84
If it doesn't have a positioned ancestor, then the second rule becomes valid, 85
where it gets positioned relative to the top left corner of the web page, which is right here. 86
Now, if you go and select the absolute positioning, notice how this box is now wildly weird in terms 87
of its position, 88
and this is because it has no ancestor that has the position property set. 89
If we select our div right here, you can see this is where it is, and its ancestor is this div. 90
And then going further up we've also got this "main" element which is also another ancestor and then we've 91
got the body, and then the HTML. 92
So this is the flow of how we get to this descendant. 93
Now, because neither this div, nor this "main" nor the body, nor the HTML have the position property 94
set, well then in that case, this box is positioned relative to the top left of the web page. 95
And what we said is position absolute, 96
top: 50px; 97
left: 50px; 98
And that's exactly what it has done for us. 99
It's pushed it from the top by 50px and it's pushed it from the left by 50px, 100
and this is relative to the top left corner of the web page. 101
Remember that the first part of the absolute positioning rule is that if it had a positioned ancestor, 102
then it would be positioned relative to that ancestor. 103
So we can actually change our code here inside the inspector for let's say we're going to take this 104
box. 105
So make sure you've actually selected the right box that has the absolute positioning, as you can see 106
here. 107
And let's find its ancestor. 108
The first one I can see is this one. 109
So we're going to select it and then we're going to add a CSS rule. 110
So we're going to go inside the element.style, which is going to add an inline style to this element 111
we've selected, and I'm going to set its position to relative. 112
Now notice how as soon as I've done that, our box has moved, and now what it's done is it's moved so 113
that these rules that we've applied to this box, namely push it down from the top and push it down 114
from the left, is now relative to its nearest positioned ancestor, which is this div right here. 115
And if you look at this, you can see it has followed that rule. 116
It's pushed it 50px from the top of this div and 50px from the left of this div. 117
And it makes this true. 118
And that's because we've got that code here on the box. 119
The tricky thing about the absolute positioning is you have to make sure if you want it positioned relative 120
to another item, you have to set that ancestor to have position relative because otherwise it's going 121
to default to positioning relative to the top left of the web page. 122
Now another aspect of absolute positioning that's important to mention while we're here is the z-index (Zed), 123
as we would say in the UK, or if you're American, it would be the z-index (Zee). 124
Now what this does is it determines which elements go on top of which in the Z-axis. 125
If we think of our web page as a graph where we have the Y-axis going this way, 126
the X-axis going horizontally this way, then we can also have a Z-axis, which actually goes in the 127
third dimension, and that's the Z-axis. 128
This basically just determines which one goes on top of which. 129
If A has a higher z-index, let's set it to 100 130
and B had a lower z-index, 131
let's say it was 50, then this one is going to come out trumps and A is going to sit on top of B. 132
And you can see this already happening with our absolute positioned box. 133
You can see it's sitting on top of everything else. 134
If we wanted to not do that, say we wanted to make this box go behind everything, well then we can 135
set this property called z-index and we can make it even negative if we wanted to. 136
Everything on screen has a default z-index of zero. 137
But notice how even if I set the z-index of this box to zero, it still doesn't fit in with everything 138
else, 139
and that's because when you set something with absolute position, it actually takes the element out 140
of the original HTML flow and puts it on another layer. 141
This is why we can quite easily change it to a negative z-index to push it behind or use the default, 142
which will take it above, but we can't actually have it inside the flow anymore. 143
For that to happen, we need to go back to static position or relative position. 144
Now, the final type of positioning I want to talk about today is Fixed positioning. 145
And this is a position that is going to be relative to the top left corner of the browser window. 146
Remember how absolute position defaults to the top left of the web page, But in this case, when it's 147
fixed, it's going to be defaulted to the browser. 148
And what that means is that even if you scroll up and down on the web page, it's still going to be 149
located in the same location relative to the browser. 150
So this is where a demo comes in really handy. 151
Let's go into fixed positioning and notice it looks the same as our absolute position until you start 152
scrolling and notice how it's just staying right there with 50px are pushed down from the top and 153
from the left. 154
And it doesn't matter where you scroll to, it's always going to hover right there. 155
Whereas with absolute positioning, you can see it's relative to the web page and it moves with the 156
web page. 157
So have a think about this when you're using these different position styles in terms of what you want. 158
Notice how in all four different positional values, I've set it to have a top and a left, and this is 159
how we position things in addition to that "position property." 160
So you can also change this and set it to instead of left. 161
You can change that to right and it would just move it to the right instead and have 50px from 162
the right. 163
But in addition, you can also add extra margin. 164
So notice how position actually goes outside of margin in the box model. 165
So I can add an extra 50px of margin and it will push it even further 166
over here. The position is actually separate from the margin, which in turn is separate from the padding, 167
which in turn is separate from the width and the height. 168
But the really nice thing about position is notice how it's calculating these other values for you so 169
that you maintain these positional values of 50 from the top and 50 from the right. 170
And as I move it around, you can see how it's reacting to it, 171
it's just changing the left side automatically to keep it in that position. 172
If all of that seemed a little bit confusing, don't worry, we're going to solidify our knowledge by 173
practicing it and writing it in code in an exercise. 174
So go ahead and download the exercise from this lesson, CSS Positioning and extract it. 175
And then once you open it, go ahead and open the index.html and then preview it on the right hand side 176
right here. 177
You'll notice that it's an absolutely blank page because all we have in the HTML is a single div that 178
contains another div. 179
But by the end of this exercise, what we're aiming to do is to create a rectangle with a circle inside. 180
Before you start, I first want to show you how you can create a circle using CSS. 181
This is something that we haven't seen yet, so if I go ahead and target this ".red-circle", using the class 182
selector, I can give it a background-color of red so that we can actually see it on screen. 183
And I'm also going to give it a width and a height. 184
So it's going to be 200px across and 200px high. 185
And once I've done that, you can see I've now got a square on the screen. 186
So without a width and a height, of course it's not visible and this is stuff that you should already 187
know. 188
So there's nothing new here. 189
But if I go ahead and add a border-radius which will define the radii of the outer border. 190
Notice what happens here. 191
Let's go ahead and give it a 5px border-radius, 192
makes the corners a little bit rounded. So we can extend this, 193
let's try 50px and you can see it now 194
looks like an app icon almost, a little rounded square. 195
But I can also use percentages. 196
So if I set it to have a 50% border radius, then I create a perfect circle. 197
And this is how we create circles in CSS. 198
Now that you've got this red circle, it's only a matter of time before you get to the final outcome, 199
which is a circle positioned on top of a rectangle. 200
Now notice some things here, 201
we want the rectangle to be 300px tall and 500px wide, and we also want it to be positioned 202
not using any margins, but using the position properties to be pushed down 200 from the top, 200 from 203
the left. 204
In addition, we want this circle to be positioned relative to the rectangle and 250 from the left, 205
150 from the top. 206
This is going to test what you've learned and if you can't figure out how to do it, I recommend instead 207
of going forwards and looking at 208
the solution, go backwards in the video and revise what we learned about positioning and you will eventually 209
be able to get there. 210
I promise you it's not too difficult, but you do have to do a little bit of thinking. 211
Pause the video and try to complete this challenge. 212
All right. 213
So let's go through the solution. 214
But before we do, I want to make sure you really try to understand the lesson, because pushing through 215
with the code is not going to help you unless you actually understand what you're doing. 216
Coding is all about thinking. 217
It's not about memorizing things, 218
tt's not about knowing the answer because you're going to get a different situation in the future and 219
you need to make sure you know why things happen, 220
and that requires a little bit of struggle. 221
Let's go through the solution. 222
So I'm going to create this rectangle which has a class of ".blue-box", and I'm going to give it a background-color 223
of blue, and we see it show up because it contains a child element that has a height and width. 224
So the parent obviously then has to have a height and width, but that's not the height and width that 225
we want. 226
We want it to be 300px in height 227
and we want it to have 500px in width. 228
So now we have our rectangle and our circle correctly sized. 229
Now it's all about positioning. 230
Firstly, let's position this rectangle. 231
We want it 200px from the top, 200px from the left. 232
We can either do this using absolute positioning because it will be relative to the top left if we don't 233
set any of the other elements to have a position, or we can set it using relative positioning. 234
Because remember that the default location is also going to be at the top left corner. 235
I'm going to use relative positioning and you're going to see very quickly why. 236
But let's go ahead and set the position to relative and then let's set it to have a top of 200px 237
to push it down 200px here, and then let's give it a left of 200px so that it's pushed 200px 238
from the left. 239
And now we have this sort of image, which is already pretty close. 240
Now we just have to move the circle and this is where that relative positioning is going to come in 241
handy because we want to position this circle relative to the box. 242
Notice how all of these sizes I've given are relative to this blue box. 243
So 150px from the top, 250px from the left. 244
And this is easily achieved if we set the position to absolute and then we set the top to push down 245
by 150px and the left to push by 250px. 246
And now you can see we have exactly the same thing as our goal. 247
Now notice these numbers that I've given here 150px, 250px, 248
basically they are half, 250 is half of 500 249
and 150 is half of 300. 250
Essentially, I wanted the top left corner of this circle to be right in the middle of the rectangle. 251
Alternatively to setting these pixel values, you could have also set it to 50% from the top and 50% 252
from the left. 253
It would achieve exactly the same thing. 254
But notice how this doesn't place it in the middle of the rectangle, as some people would think, because 255
this is the point that we're defining the top left corner of this div now, even though the corners 256
are rounded, it doesn't mean that this div isn't a box, it's still a box. 257
It's the CSS box model. 258
All we've done is we've said the top left corner should be 50% of the width from the left of the rectangle 259
and 50% from the top of the rectangle. 260
So if you wanted this circle to be bang in the middle, you would actually have to specify different 261
values for the top and the left. 262
Now you could have actually solved this challenge in many different ways, 263
this didn't have to be relative and this didn't have to be absolute. 264
You could have, for example, set this position to be absolute because then it would make this blue 265
box relative to the top left corner because it doesn't have any other ancestors which have a position. 266
Alternatively, you could have set this to fixed because in this case we don't have any other content 267
on our website, so it doesn't actually scroll. 268
And so you won't see that movement relative to the browser. 269
As you can see, there's many ways of doing the same thing, 270
but the important thing is when your code gets more complex when there's more items in your HTML that 271
you understand what your CSS is doing and how to resolve any conflicts or when it's not doing what you 272
expect it to. 273
So 274
that you understand what code you're actually writing and how it's behaving. 275
Now that we know a little bit more about positioning, we can head over to the next lesson where I've 276
got a final project for this section where we're going to create the flag of Laos using everything we've 277
learned so far. 278
For all of that and more, I'll see you there.