All language subtitles for 7. CSS Static and Relative Positioning

af Afrikaans
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
tl Filipino
fi Finnish
fr French Download
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 0 1 00:00:00,740 --> 00:00:08,330 Now in the last lesson we looked at how we could change the display property using CSS in order to 1 2 00:00:08,330 --> 00:00:12,250 change the way that our elements stacked against each other. 2 3 00:00:12,260 --> 00:00:17,610 Now in this lesson we're going to explore CSS positioning in more detail. 3 4 00:00:17,690 --> 00:00:25,610 But before we do so, the first thing we have to realize is that even without CSS, your HTML element 4 5 00:00:25,670 --> 00:00:33,020 already has predefined rules for how it should be displayed on your web page even if you don't have 5 6 00:00:33,170 --> 00:00:34,410 any CSS. 6 7 00:00:34,460 --> 00:00:41,300 And we have to understand how things get positioned by default before we can go on to change it, to bend 7 8 00:00:41,300 --> 00:00:45,200 it to our will, without getting confused and getting stuck. 8 9 00:00:45,200 --> 00:00:47,930 So let's take a look at these rules. 9 10 00:00:48,050 --> 00:00:50,330 So let's go through those rules quickly. 10 11 00:00:50,570 --> 00:00:54,590 The first rule is that content is everything. 11 12 00:00:54,590 --> 00:01:01,860 Now we know that inline elements only take up as much width and as much height as the content. 12 13 00:01:01,880 --> 00:01:07,280 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 14 00:01:07,340 --> 00:01:13,820 a short word then it has a short width. And with block elements, even though they take up 100 percent of 14 15 00:01:13,820 --> 00:01:18,290 the width, the height is still determined by the content. 15 16 00:01:18,470 --> 00:01:26,510 So if you have a really super large font for your h1 or for your paragraph, then that box model is going 16 17 00:01:26,510 --> 00:01:31,360 to take up a lot more height than if it was a smaller font. 17 18 00:01:31,460 --> 00:01:38,720 So your content is the first thing that determines how large things gets displayed and what the height 18 19 00:01:38,780 --> 00:01:40,250 and the width will be. 19 20 00:01:40,280 --> 00:01:43,590 And this is despite any CSS. 20 21 00:01:43,610 --> 00:01:50,520 The next thing to remember is that the order of the elements on screen comes from your HTML code. 21 22 00:01:50,570 --> 00:01:55,940 So in this case we have an h1, three paragraphs, then an image. 22 23 00:01:55,940 --> 00:02:03,350 This is how we've written our code in our HTML file and this is how it gets rendered, in that order. 23 24 00:02:03,350 --> 00:02:10,970 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 25 00:02:10,970 --> 00:02:13,820 display in a corresponding way. 25 26 00:02:13,940 --> 00:02:18,770 So the default layout order is determined by your code. 26 27 00:02:18,770 --> 00:02:23,930 The third thing we need to know is that children sit on top of parents. 27 28 00:02:23,960 --> 00:02:25,050 What do I mean by that? 28 29 00:02:25,070 --> 00:02:29,210 So here on the left I've got a div that's colored in red. 29 30 00:02:29,210 --> 00:02:38,210 Now if inside this div I add an h1 with some text, then that h1 is going to be on top of the 30 31 00:02:38,210 --> 00:02:38,750 div. 31 32 00:02:38,900 --> 00:02:43,780 So it's more towards the viewer and away from the screen. 32 33 00:02:43,820 --> 00:02:47,950 So this kind of introduces the concept of the Z index. 33 34 00:02:48,050 --> 00:02:53,000 We know that on screen we have an X and a Y axis. 34 35 00:02:53,090 --> 00:03:00,470 But there's also a Z axis, and that determines which element will be displayed on the other one, because 35 36 00:03:00,530 --> 00:03:07,010 if in this case the div was in front of the h1, then we wouldn't see the h1 at all. 36 37 00:03:07,010 --> 00:03:15,160 So by default our HTML elements that are children, they will sit on top of the parent element. 37 38 00:03:15,200 --> 00:03:23,540 So if we modify this code even further, and we add a span nested inside that h1, then the word inside 38 39 00:03:23,540 --> 00:03:27,720 the span is going to be on top of the h1. 39 40 00:03:27,740 --> 00:03:35,930 So we have three elements here on screen so far, a div an h1 and a span, and going from the screen towards 40 41 00:03:35,930 --> 00:03:43,310 the viewer, we first have the div, then the h1, then the span. From top to the bottom of the hierarchy, 41 42 00:03:43,630 --> 00:03:46,460 it comes closer and closer towards the viewer. 42 43 00:03:46,580 --> 00:03:55,200 So these three are the default rules for how things get rendered on screen just based on your HTML code. 43 44 00:03:55,460 --> 00:04:03,260 Now you can also set a CSS property which is the position property in order to position elements on 44 45 00:04:03,260 --> 00:04:06,150 screen the way that you want it to 45 46 00:04:06,350 --> 00:04:12,770 instead of just going along with the default layout, and in most cases you're going to want to make changes 46 47 00:04:12,800 --> 00:04:14,230 to the default layout. 47 48 00:04:14,330 --> 00:04:20,200 So let's look at some of the ways in which we can change this position property. 48 49 00:04:20,240 --> 00:04:23,080 Now these are the four that I'm going to talk about. 49 50 00:04:23,270 --> 00:04:32,080 And the first one, the static position, we've actually already talked about it. All HTML elements are static 50 51 00:04:32,080 --> 00:04:41,350 in their position by default, and static just means go along with the HTML rules and keep to the default 51 52 00:04:41,390 --> 00:04:48,380 HTML flow, and that is what we see when we just have HTML without any CSS, or if we 52 53 00:04:48,380 --> 00:04:51,880 don't change this position property at all. 53 54 00:04:51,890 --> 00:04:55,540 Now the next one is called the relative positioning. 54 55 00:04:55,700 --> 00:05:04,190 And what this allows us to do is to position the element that we select relative to how it would have 55 56 00:05:04,190 --> 00:05:07,220 been positioned had it been static. 56 57 00:05:07,220 --> 00:05:16,010 So in this case on the left we've got our Bacon Fansite, and this is just the normal HTML flow. 57 58 00:05:16,460 --> 00:05:21,560 The image is being shown to the left and it's below all the other elements, 58 59 00:05:21,590 --> 00:05:27,160 abiding by those three rules for HTML flow that we mentioned before. 59 60 00:05:27,440 --> 00:05:35,360 Now if we select that image element and we change its position property to relative instead of static, 60 61 00:05:35,420 --> 00:05:43,760 which is the default remember, and in addition to that we say it should be pushed 30 pixels from the 61 62 00:05:43,760 --> 00:05:47,300 left of the previous position, 62 63 00:05:47,300 --> 00:05:50,920 this is how our image will end up being positioned. 63 64 00:05:51,320 --> 00:05:59,270 So whereas the left edge of our image used to be here and that would have been its natural position, 64 65 00:05:59,330 --> 00:06:01,920 abiding by the HTML flow, 65 66 00:06:02,060 --> 00:06:10,940 now we're saying, give that image 30 pixels of space between its left edge and where the left edge used 66 67 00:06:10,940 --> 00:06:12,050 to be. 67 68 00:06:12,050 --> 00:06:15,240 And there's four of these coordinate properties: 68 69 00:06:15,470 --> 00:06:18,340 the top, the bottom, the left and the right. 69 70 00:06:18,440 --> 00:06:24,820 And we can set values for them in order to determine how we want to move our element. 70 71 00:06:24,830 --> 00:06:30,490 So let's say that we've got a image that is positioned using relative layer. 71 72 00:06:30,620 --> 00:06:34,830 Then we set the top coordinate property to 20 pixels. 72 73 00:06:34,880 --> 00:06:42,380 That means it'll get moved down by 20 pixels. And if we change the left property 20 pixels, then it'll 73 74 00:06:42,380 --> 00:06:44,610 get pushed right 20 pixels. 74 75 00:06:44,780 --> 00:06:48,960 If we change the right property 20 pixels, it'll get pushed left 75 76 00:06:49,130 --> 00:06:53,080 20 pixels, and the bottom property as well. 76 77 00:06:53,090 --> 00:06:59,330 Now there's two important things that you have to remember when you're dealing with relative positioning. 77 78 00:06:59,330 --> 00:07:05,920 The first thing is that when you move an element that has a relative position, 78 79 00:07:05,950 --> 00:07:09,290 say in this case we're pushing it down by 50 pixels, 79 80 00:07:09,290 --> 00:07:14,120 it doesn't affect the position of anything else on screen. 80 81 00:07:14,120 --> 00:07:22,920 It's as if the old position was kept and everything else just flows around it as if it was never moved. 81 82 00:07:22,970 --> 00:07:30,530 It's almost like this element left the ghost of itself where it used to be in order for all the other 82 83 00:07:30,560 --> 00:07:33,620 elements to keep their own positions. 83 84 00:07:33,620 --> 00:07:38,960 Now the other thing to remember is that when we change the coordinate properties, for example in this 84 85 00:07:38,960 --> 00:07:47,550 case we're saying make the top corner property for this relatively positioned image 50 pixels, 85 86 00:07:47,690 --> 00:07:54,890 what that really means is that we're taking the top of where that image used to be and we're giving it 86 87 00:07:55,010 --> 00:08:00,120 a 50 pixel margin from the top of our current image. 87 88 00:08:00,320 --> 00:08:07,730 So if you think back to the box model when we spoke about margins, this is the best way of thinking about 88 89 00:08:07,730 --> 00:08:15,010 these coordinates. Because very often students tend to ask, 'If it's top 50, why is it not going up by 50 89 90 00:08:15,020 --> 00:08:17,350 and why is it instead going down, 90 91 00:08:17,850 --> 00:08:20,640 and what is it top relative to?'. 91 92 00:08:20,720 --> 00:08:22,360 So if you get confused 92 93 00:08:22,550 --> 00:08:24,640 have a look back at this video. 93 94 00:08:25,010 --> 00:08:35,270 So inside this code pen I've created three divs that are colored red, blue and yellow, and they each 94 95 00:08:35,270 --> 00:08:39,060 have a height of 100 pixels and a width of 100 pixels, 95 96 00:08:39,080 --> 00:08:43,880 so essentially three squares inside a body element. 96 97 00:08:43,910 --> 00:08:53,900 I want to show you what changing the red div's position from static, which it currently is by default, 97 98 00:08:54,500 --> 00:09:02,360 to relative does. Now by itself changing this position property does nothing. 98 99 00:09:02,360 --> 00:09:08,120 It only starts doing something when you use one of the coordinate properties like left. 99 100 00:09:08,120 --> 00:09:15,980 So let's push it 20 pixels from the left you can see that it just got nudged 20 pixels from the left 100 101 00:09:16,070 --> 00:09:17,770 of where it used to be. 101 102 00:09:17,780 --> 00:09:24,030 Now I can also move it all the way to the right by saying something like left 600 pixels. 102 103 00:09:24,230 --> 00:09:32,270 So it's now got a margin between the left edge of where it used to be and the current left edge of 103 104 00:09:32,450 --> 00:09:34,040 600 pixels. 104 105 00:09:34,040 --> 00:09:42,240 Now if I say right 200 pixels,, can you predict what will happen to my red square? 105 106 00:09:43,920 --> 00:09:46,870 So let's take a look, see if you got it right. 106 107 00:09:47,400 --> 00:09:53,060 So all of our red square has completely disappeared off the screen. 107 108 00:09:53,490 --> 00:09:54,830 Now why is that? 108 109 00:09:54,870 --> 00:10:02,580 Well, because the previous right edge was here, and to have a margin between the current right edge and 109 110 00:10:02,580 --> 00:10:11,100 the previous right edge of 200 pixels pushes our red square all the way over to the left that you can't 110 111 00:10:11,100 --> 00:10:12,250 see it anymore. 111 112 00:10:12,510 --> 00:10:18,900 Now some people might have thought that by saying right 200 pixels, then it should be somewhere around 112 113 00:10:18,900 --> 00:10:23,310 here, because this is the right edge of the screen. 113 114 00:10:23,340 --> 00:10:32,010 But as we mentioned the relative positioning is relative to where the element would have been displayed 114 115 00:10:32,400 --> 00:10:36,150 if it was just following the natural HTML flow. 115 116 00:10:36,990 --> 00:10:44,880 So it would have been here and now there's a margin between its previous right edge and its current 116 117 00:10:44,880 --> 00:10:47,560 right edge of 200 pixels. 117 118 00:10:47,640 --> 00:10:55,290 But remember as we said that the relative positioning doesn't affect any other element on screen. 118 119 00:10:55,530 --> 00:11:05,700 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 120 00:11:05,730 --> 00:11:06,920 element on screen. 120 121 00:11:06,930 --> 00:11:12,070 It doesn't for example push this blue square downwards or any other element. 121 122 00:11:12,120 --> 00:11:18,390 It's as if the ghost of the red square's past has stayed where it used to be, 122 123 00:11:18,390 --> 00:11:22,440 and it's only this newer version that's being moved around. 123 124 00:11:22,560 --> 00:11:24,770 So there's a lot of new concepts here. 124 125 00:11:24,870 --> 00:11:31,770 And before we move on I just want to make sure that you're comfortable with this idea of relative positioning. 125 126 00:11:32,040 --> 00:11:40,800 So as a challenge I want you to change the display property of the blue and the yellow squares so that 126 127 00:11:40,800 --> 00:11:46,170 they will show up in a row where we've got the red square, the blue square and the yellow square, 127 128 00:11:46,350 --> 00:11:51,090 and then I want you to move the red square to the right of the yellow square. 128 129 00:11:51,330 --> 00:11:54,210 And this is what you should end up with. 129 130 00:11:54,210 --> 00:11:58,710 Now don't worry too much about the gaps between the squares. 130 131 00:11:58,710 --> 00:12:02,020 It's more important that you get the order right. 131 132 00:12:02,040 --> 00:12:07,860 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 133 00:12:07,860 --> 00:12:12,800 the square. 133 134 00:12:12,830 --> 00:12:13,190 All right. 134 135 00:12:13,190 --> 00:12:15,260 So did you manage to do it? 135 136 00:12:16,590 --> 00:12:25,140 So the first thing that we needed to change was the display property of all three elements. So we're 136 137 00:12:25,140 --> 00:12:32,700 going to change it to inline block so that we can still change its width but also have them show up 137 138 00:12:32,700 --> 00:12:33,610 inline. 138 139 00:12:33,870 --> 00:12:40,880 So let's add that line of code to all three divs. 139 140 00:12:40,990 --> 00:12:43,310 So now they're in the same line. 140 141 00:12:43,480 --> 00:12:48,180 So I want to get rid of this top and make them line up properly. 141 142 00:12:48,430 --> 00:12:54,890 But I now want to nudge the blue square to the position of the red square. 142 143 00:12:55,180 --> 00:13:02,420 So I'm going to make its position relative to where it should be. 143 144 00:13:02,560 --> 00:13:14,970 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 145 00:13:15,220 --> 00:13:22,270 So I'm going to change its position to relative and also give it a right margin from its previous position 145 146 00:13:22,750 --> 00:13:26,300 to 100 pixels and that nudges it left. 146 147 00:13:26,320 --> 00:13:35,950 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 148 00:13:35,950 --> 00:13:44,040 its left margin to 200 pixels, and that moves the red square over to the right. 148 149 00:13:44,050 --> 00:13:50,940 Now the reason why the spaces between our squares are inconsistent is because by making it an inline 149 150 00:13:50,950 --> 00:13:56,160 block there's actually a little space that gets added in by the browser. 150 151 00:13:56,260 --> 00:14:04,420 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 152 00:14:04,450 --> 00:14:06,490 each of the inline block elements. 152 153 00:14:06,490 --> 00:14:09,750 And that's what's making our gap slightly inconsistent. 153 154 00:14:10,000 --> 00:14:15,000 But the important thing is that you managed to get the order of the blocks correct. 154 155 00:14:15,100 --> 00:14:19,900 So if you managed to get the squares to line up in this order then that means you've successfully completed 155 156 00:14:19,900 --> 00:14:23,550 the challenge. In order to get the position more fine tuned, 156 157 00:14:23,560 --> 00:14:25,910 we're going to look at different ways in the future. 157 158 00:14:25,990 --> 00:14:32,170 Now in the next lesson I want to show you another way of positioning your elements by using absolute 158 159 00:14:32,200 --> 00:14:33,270 positions. 159 160 00:14:33,320 --> 00:14:35,060 So for all of that and more. 160 161 00:14:35,090 --> 00:14:36,280 I'll see you on the next lesson. 18067

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.