Now in the last lesson we looked at how we can give our elements a relative position. 1
So that's a position that's relative to where the element would have been had we followed the natural 2
HTML flow. 3
So for example in this case by making the image 30 pixels from the right relative to its previous position 4
then we're basically saying that there should be a right margin between the image and where it used 5
to be in the value of 30 pixels. 6
Now I want to talk about a different way of positioning which is using the absolute position. 7
So in this case I've got an image that's inside a div. So the div is colored red and it has a relative 8
position. 9
Now our image is nested inside that div, 10
and I've given it an absolute position. 11
Now if I changed the right coordinate property to 30 pixels it's not going to shift left by 30 pixels. 12
No. 13
In fact it's going to shift to the right of the screen. 14
And this is because with absolute positioning we are positioning the element, 15
so in this case the image element, relative to its parent, and in this case its parent is that red div. 16
So we now have added a right margin of 30 pixels between the image element and the parent div. 17
Now admittedly the naming is a little bit confusing as I would have probably called absolute positioning 18
relative positioning because we're always specifying a margin that's relative to its parent. 19
But I think the reason why they called it absolute position is because in most cases the parent is simply 20
the entire body of the web page. 21
So the position when you're using absolute positioning looks like you're giving it a margin relative 22
to the entire page which looks like you're changing the absolute position of it. 23
But don't get confused about the naming. 24
Just remember that relative positioning means that you're adding a margin relative to where the element 25
should have been, 26
but absolute position means that you're adding a margin to its parent element. 27
So in this case we've still got our three divs inside a parent element that's the body element. 28
Now let's get rid of our display and our position for all of our divs so that we now have three squares that 29
are stacked vertically on top of each other, which are all block elements, so they are resting on different 30
lines. 31
Now if I set the position of my first red square to absolute, 32
and I give it a left margin of say 200 pixels the first thing that you notice is that by using absolute positioning 33
it does affect the flow of your HTML. 34
So unlike when we use relative positioning where we left behind some sort of ghost element where it 35
still kept the positions of everything else the same, 36
but when you're using absolute positioning, you're actually taking the element out of the flow of the document 37
and it's no longer considered a part of the natural flow of the document. 38
So that's why the blue square and the yellow square have shifted up, because it's as if I've just gone 39
and deleted that div. Basically red is now dead to blue and yellow. 40
It's like as if they never had a friendship before. 41
But the cool thing is that I can now move this red square anywhere on screen relative to its parent, 42
which is the entire body. 43
So for example I could say right 20 pixels and that will just give it a right margin of 20 pixels from 44
the right of its parent, which is the body. 45
And so as a challenge I want you to complete exactly the same task but it's going to be a little bit 46
different this time. 47
Now this is what you're aiming for. 48
You're aiming for three squares, still 100 pixels by 100 pixels, that are touching each other corner to 49
corner. 50
And this time I want you to make it pixel perfect so they are right up next to each other touching each 51
other exactly on their corners. 52
And it should be yellow, then blue, then red, and you're going to use the absolute position system in order 53
to do this. 54
So pause the video and give it a go now. 55
So in order to achieve the design that we want the first thing that I'm going to do is I'm going to 56
add a position absolute to all of our divs. 57
Now the yellow is almost exactly where it's meant to be 58
apart from one slight problem. 59
And this was a bit of a trick question in there to see if you remembered what we did before. 60
You can see that we're trying to get the yellow to touch with the left and the top edge. 61
Now I appreciate it's a little bit difficult to see because of how bright that yellow is, but if you look 62
carefully you can see that there's definitely a margin there between the yellow and the edge of the 63
screen. 64
And the reason for that is because, remember, everything is nested inside our HTML body, and our 65
browser has default CSS rules for the body, and we have to get rid of those if we want to have no margin. 66
So let's first target the body and set the margin to be zero 67
around all four sides, 68
so that our yellow square can touch the edge, and that makes our Maths a little bit easier when we're trying 69
to figure out how to get the squares touching corner to corner. 70
So we've got yellow in the right position. 71
The next thing is the blue. 72
So if we're positioning the blue square relative to the parent which is the body then all we need to 73
do is give it a left margin of 100 pixels 74
and a top margin of 100 pixels, and now blue is touching yellow 75
corner to corner. 76
And finally we can go to our red, and we can change its top margin to 200 pixels and its left margin to 77
200 pixels and we are now pixel perfect with our solution. 78
And we've created the design that we wanted. 79
So how did that go? 80
You would have noticed that it's a lot easier moving things around using absolute positioning when you're 81
just thinking about it being relative to the body. 82
And in this case if you wanted your squares to be touching each other pixel perfect with no space between 83
them then it's very very easy to do because in this case all three elements are positioning themselves 84
relative to the same thing which is the body of the web page and not two different things like where 85
they used to be. 86
And this is usually a much easier way for people to think about lay out although in most cases you will 87
find yourself using maybe a combination of both, 88
especially when you want to keep the other elements on screen still in the same flow as what it used 89
to be before you started positioning one element. 90
So they're both really really useful and you'll see both of them really commonly across web site 91
CSS. Now one thing to remember is that the parent doesn't always have to be the body. 92
It can also be the closest parent that has a relative layer. 93
So for example if we put another div around our red square and we set it's position, 94
so this is called container, 95
we set it's position to be relative, 96
and we don't change it. 97
We're not going to touch it. 98
But this sets up this container to be a perfect parent for our absolute positioning. 99
So let's give it a width of say 300 pixels, height of 300 pixels, and let's give it a background color 100
of grey. 101
Now you can see this container. 102
Now you'll notice that the design for our web page has now changed and quite dramatically so because 103
now our red square is a child of that parent container. 104
And now it's defining its position relative to that grey container square. 105
So if I delete that left 200 and instead I say right 20 pixels it's no longer having a right margin 106
of 20 pixels from the edge of the body, 107
but it's now relative to its parent container. 108
And even though our other squares, our blue and yellow, are still relative to the body, because we haven't 109
defined a vertical position for it, 110
it's being pushed down by this element with a relative layer. 111
So we can change this by giving it a top property of zero. 112
And when ever you're using zero, you don't actually have to specify a unit like pixels or percent. And let's 113
do the same for our yellow square as well. 114
And let's push our red square over and let's push our red square over so that it is right zero. 115
And you can see that we've got exactly the same layout but this time because red is nested in a container 116
we're using completely different code. 117
And the beauty of this is that you can use containers to fine tune the position of your elements on 118
screen by using a combination of absolute and relative positioning. 119
Now the last thing I want to show you before we finish our section on positioning is, I want to show 120
you that last value which is the fixed position. 121
So for example if I change the yellow's position from absolute to fixed and I say that it is fixed to 122
the top then if I scroll through the web page it will stay in its current position. 123
Now I can show you this. 124
If I create some h1s in here just to give ourselves a bit more space so that we can actually scroll 125
through our web site. 126
So I'm just going to copy and paste a whole bunch of these. 127
So we've now got a whole bunch of h1s, and we can scroll through our web page, and you'll notice that 128
the yellow div stays exactly where it is fixed in its position relative to the body of the web site, 129
and it doesn't move despite all my scrolling. 130
So this is really useful if you have a nav bar that you that you want to be fixed so that it follows 131
the user as they scroll through your web site or sometimes you might have a side bar that you want to stay 132
fixed, 133
and this is how you would do it. 134
So that's all I wanted to cover for the CSS position property. In the next lesson we're going to look 135
at how we can further improve our web site by using what we've just learned.