Now in the last lesson we looked at how we could change the display property using CSS in order to 1
change the way that our elements stacked against each other. 2
Now in this lesson we're going to explore CSS positioning in more detail. 3
But before we do so, the first thing we have to realize is that even without CSS, your HTML element 4
already has predefined rules for how it should be displayed on your web page even if you don't have 5
any CSS. 6
And we have to understand how things get positioned by default before we can go on to change it, to bend 7
it to our will, without getting confused and getting stuck. 8
So let's take a look at these rules. 9
So let's go through those rules quickly. 10
The first rule is that content is everything. 11
Now we know that inline elements only take up as much width and as much height as the content. 12
So if you have a span that contains a long word then it has a large width, if you have a span that contains 13
a short word then it has a short width. And with block elements, even though they take up 100 percent of 14
the width, the height is still determined by the content. 15
So if you have a really super large font for your h1 or for your paragraph, then that box model is going 16
to take up a lot more height than if it was a smaller font. 17
So your content is the first thing that determines how large things gets displayed and what the height 18
and the width will be. 19
And this is despite any CSS. 20
The next thing to remember is that the order of the elements on screen comes from your HTML code. 21
So in this case we have an h1, three paragraphs, then an image. 22
This is how we've written our code in our HTML file and this is how it gets rendered, in that order. 23
Now if we change the order and put the image at the top of our code file, then our web site is going to 24
display in a corresponding way. 25
So the default layout order is determined by your code. 26
The third thing we need to know is that children sit on top of parents. 27
What do I mean by that? 28
So here on the left I've got a div that's colored in red. 29
Now if inside this div I add an h1 with some text, then that h1 is going to be on top of the 30
div. 31
So it's more towards the viewer and away from the screen. 32
So this kind of introduces the concept of the Z index. 33
We know that on screen we have an X and a Y axis. 34
But there's also a Z axis, and that determines which element will be displayed on the other one, because 35
if in this case the div was in front of the h1, then we wouldn't see the h1 at all. 36
So by default our HTML elements that are children, they will sit on top of the parent element. 37
So if we modify this code even further, and we add a span nested inside that h1, then the word inside 38
the span is going to be on top of the h1. 39
So we have three elements here on screen so far, a div an h1 and a span, and going from the screen towards 40
the viewer, we first have the div, then the h1, then the span. From top to the bottom of the hierarchy, 41
it comes closer and closer towards the viewer. 42
So these three are the default rules for how things get rendered on screen just based on your HTML code. 43
Now you can also set a CSS property which is the position property in order to position elements on 44
screen the way that you want it to 45
instead of just going along with the default layout, and in most cases you're going to want to make changes 46
to the default layout. 47
So let's look at some of the ways in which we can change this position property. 48
Now these are the four that I'm going to talk about. 49
And the first one, the static position, we've actually already talked about it. All HTML elements are static 50
in their position by default, and static just means go along with the HTML rules and keep to the default 51
HTML flow, and that is what we see when we just have HTML without any CSS, or if we 52
don't change this position property at all. 53
Now the next one is called the relative positioning. 54
And what this allows us to do is to position the element that we select relative to how it would have 55
been positioned had it been static. 56
So in this case on the left we've got our Bacon Fansite, and this is just the normal HTML flow. 57
The image is being shown to the left and it's below all the other elements, 58
abiding by those three rules for HTML flow that we mentioned before. 59
Now if we select that image element and we change its position property to relative instead of static, 60
which is the default remember, and in addition to that we say it should be pushed 30 pixels from the 61
left of the previous position, 62
this is how our image will end up being positioned. 63
So whereas the left edge of our image used to be here and that would have been its natural position, 64
abiding by the HTML flow, 65
now we're saying, give that image 30 pixels of space between its left edge and where the left edge used 66
to be. 67
And there's four of these coordinate properties: 68
the top, the bottom, the left and the right. 69
And we can set values for them in order to determine how we want to move our element. 70
So let's say that we've got a image that is positioned using relative layer. 71
Then we set the top coordinate property to 20 pixels. 72
That means it'll get moved down by 20 pixels. And if we change the left property 20 pixels, then it'll 73
get pushed right 20 pixels. 74
If we change the right property 20 pixels, it'll get pushed left 75
20 pixels, and the bottom property as well. 76
Now there's two important things that you have to remember when you're dealing with relative positioning. 77
The first thing is that when you move an element that has a relative position, 78
say in this case we're pushing it down by 50 pixels, 79
it doesn't affect the position of anything else on screen. 80
It's as if the old position was kept and everything else just flows around it as if it was never moved. 81
It's almost like this element left the ghost of itself where it used to be in order for all the other 82
elements to keep their own positions. 83
Now the other thing to remember is that when we change the coordinate properties, for example in this 84
case we're saying make the top corner property for this relatively positioned image 50 pixels, 85
what that really means is that we're taking the top of where that image used to be and we're giving it 86
a 50 pixel margin from the top of our current image. 87
So if you think back to the box model when we spoke about margins, this is the best way of thinking about 88
these coordinates. Because very often students tend to ask, 'If it's top 50, why is it not going up by 50 89
and why is it instead going down, 90
and what is it top relative to?'. 91
So if you get confused 92
have a look back at this video. 93
So inside this code pen I've created three divs that are colored red, blue and yellow, and they each 94
have a height of 100 pixels and a width of 100 pixels, 95
so essentially three squares inside a body element. 96
I want to show you what changing the red div's position from static, which it currently is by default, 97
to relative does. Now by itself changing this position property does nothing. 98
It only starts doing something when you use one of the coordinate properties like left. 99
So let's push it 20 pixels from the left you can see that it just got nudged 20 pixels from the left 100
of where it used to be. 101
Now I can also move it all the way to the right by saying something like left 600 pixels. 102
So it's now got a margin between the left edge of where it used to be and the current left edge of 103
600 pixels. 104
Now if I say right 200 pixels,, can you predict what will happen to my red square? 105
So let's take a look, see if you got it right. 106
So all of our red square has completely disappeared off the screen. 107
Now why is that? 108
Well, because the previous right edge was here, and to have a margin between the current right edge and 109
the previous right edge of 200 pixels pushes our red square all the way over to the left that you can't 110
see it anymore. 111
Now some people might have thought that by saying right 200 pixels, then it should be somewhere around 112
here, because this is the right edge of the screen. 113
But as we mentioned the relative positioning is relative to where the element would have been displayed 114
if it was just following the natural HTML flow. 115
So it would have been here and now there's a margin between its previous right edge and its current 116
right edge of 200 pixels. 117
But remember as we said that the relative positioning doesn't affect any other element on screen. 118
So if I said top 50 pixels it pushes it down by 50 pixels but it doesn't affect the layout of any other 119
element on screen. 120
It doesn't for example push this blue square downwards or any other element. 121
It's as if the ghost of the red square's past has stayed where it used to be, 122
and it's only this newer version that's being moved around. 123
So there's a lot of new concepts here. 124
And before we move on I just want to make sure that you're comfortable with this idea of relative positioning. 125
So as a challenge I want you to change the display property of the blue and the yellow squares so that 126
they will show up in a row where we've got the red square, the blue square and the yellow square, 127
and then I want you to move the red square to the right of the yellow square. 128
And this is what you should end up with. 129
Now don't worry too much about the gaps between the squares. 130
It's more important that you get the order right. 131
So they're all on the same line and it's blue, then yellow, then red, and you should be able to see most of 132
the square. 133
All right. 134
So did you manage to do it? 135
So the first thing that we needed to change was the display property of all three elements. So we're 136
going to change it to inline block so that we can still change its width but also have them show up 137
inline. 138
So let's add that line of code to all three divs. 139
So now they're in the same line. 140
So I want to get rid of this top and make them line up properly. 141
But I now want to nudge the blue square to the position of the red square. 142
So I'm going to make its position relative to where it should be. 143
And I'm going to give it a right margin of 100 pixels and I'm going to do the same thing to our yellow square. 144
So I'm going to change its position to relative and also give it a right margin from its previous position 145
to 100 pixels and that nudges it left. 146
Now the final thing I have to doing is to move the red square to the right by 200 pixels. So I can change 147
its left margin to 200 pixels, and that moves the red square over to the right. 148
Now the reason why the spaces between our squares are inconsistent is because by making it an inline 149
block there's actually a little space that gets added in by the browser. 150
So we can see that if we get rid of all the position code there's just a slight smudge of a space between 151
each of the inline block elements. 152
And that's what's making our gap slightly inconsistent. 153
But the important thing is that you managed to get the order of the blocks correct. 154
So if you managed to get the squares to line up in this order then that means you've successfully completed 155
the challenge. In order to get the position more fine tuned, 156
we're going to look at different ways in the future. 157
Now in the next lesson I want to show you another way of positioning your elements by using absolute 158
positions. 159
So for all of that and more. 160
I'll see you on the next lesson.