Original subtitles

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