1 00:00:00,000 --> 00:00:05,990 Perhaps of all the various aspects of CSS, the hardest to learn and master is layout. 2 00:00:06,000 --> 00:00:10,990 There have been numerous books, web sites, and courses dedicated to nothing but CSS layout. 3 00:00:11,000 --> 00:00:14,990 With that in mind, I want to introduce you to some of those concepts in broader 4 00:00:15,000 --> 00:00:19,990 terms, so that the terminology and overall concepts of CSS layout aren't foreign 5 00:00:20,000 --> 00:00:23,990 to you as you begin to experiment with it and learn the various nuances around 6 00:00:24,000 --> 00:00:25,990 controlling page layout with CSS. 7 00:00:26,000 --> 00:00:29,990 I want to start with the concept of element positioning. 8 00:00:30,000 --> 00:00:34,990 Positioning allows you to take an element on the page and control where and how 9 00:00:35,000 --> 00:00:38,990 it's positioned relative to things such as its original starting position, other 10 00:00:39,000 --> 00:00:41,990 elements, or even the viewport itself. 11 00:00:42,000 --> 00:00:44,990 CSS defines three positioning schemes: 12 00:00:45,000 --> 00:00:49,990 Normal Flow, Element Floating, and Absolute Positioning. 13 00:00:50,000 --> 00:00:53,990 Now, we are going to discuss floating in more detail in another movie in just a moment, 14 00:00:54,000 --> 00:00:58,990 so for now, let's focus on Normal Flow and Absolute Positioning. 15 00:00:59,000 --> 00:01:03,990 Normal Flow is exactly what happens when you do nothing to control page layout. 16 00:01:04,000 --> 00:01:07,990 You can think of this as the default layout method of your browser, and it's more 17 00:01:08,000 --> 00:01:09,990 powerful than you think. 18 00:01:10,000 --> 00:01:14,990 Essentially, normal document flow takes the content in the order that it's found 19 00:01:15,000 --> 00:01:19,990 in the HTML and then stacks it, one element right on top of another. 20 00:01:20,000 --> 00:01:22,990 Block-level elements like headings, paragraphs, and section elements like 21 00:01:23,000 --> 00:01:26,990 divs, sections, articles, and asides, those things take up their own space 22 00:01:27,000 --> 00:01:31,990 in a document's normal flow, and they just stack one on top of another much like blocks. 23 00:01:32,000 --> 00:01:35,990 Inline elements like images, links, or span tags will appear inside of those 24 00:01:36,000 --> 00:01:39,990 block level elements, and they simply stack themselves based on the flowing of 25 00:01:40,000 --> 00:01:41,990 line boxes, and what's a line box? 26 00:01:42,000 --> 00:01:46,990 Well, think of those as the lines of text in a paragraph and the way that 27 00:01:47,000 --> 00:01:47,990 they stack themselves. 28 00:01:48,000 --> 00:01:50,990 They stack themselves only once they've gone as wide as they can go. 29 00:01:51,000 --> 00:01:52,990 So just think of like the lines in a paragraph. 30 00:01:53,000 --> 00:01:56,990 Now, believe it or not, Normal Flow can and should handle the majority of your 31 00:01:57,000 --> 00:02:00,990 layout needs by letting elements stack in the order that they are found. 32 00:02:01,000 --> 00:02:04,990 It's a lot easier to make some minor tweaks to create columns or reorder a 33 00:02:05,000 --> 00:02:05,990 single element or two. 34 00:02:06,000 --> 00:02:10,990 Now, if you want elements to arrange themselves based on normal document flow, 35 00:02:11,000 --> 00:02:11,990 you don't really need to do anything. 36 00:02:12,000 --> 00:02:13,990 The browser is just going to handle it automatically. 37 00:02:14,000 --> 00:02:18,990 If, on the other hand, you do want to tweak or drastically alter the positioning 38 00:02:19,000 --> 00:02:21,990 of your elements, you can then use the position property. 39 00:02:22,000 --> 00:02:25,990 Exploring its values is also going to allow us to explore our other 40 00:02:26,000 --> 00:02:26,990 positioning models. 41 00:02:27,000 --> 00:02:29,990 The position property accepts one of five values: 42 00:02:30,000 --> 00:02:34,990 static, relative, absolute, fixed, and inherit. 43 00:02:35,000 --> 00:02:38,990 Inherit simply means that the position value from the element's parent should be used. 44 00:02:39,000 --> 00:02:42,990 Now, static tells the element to position itself using normal document flow, and 45 00:02:43,000 --> 00:02:44,990 you can think of that as, like, the default value. 46 00:02:45,000 --> 00:02:49,990 However, relative positioning is still considered part of normal document flow, 47 00:02:50,000 --> 00:02:54,990 but it allows you to tweak an element's position based on offset values that you could give it. 48 00:02:55,000 --> 00:02:59,990 Offset values can be given for top, left, bottom, or the right of an element. 49 00:03:00,000 --> 00:03:03,990 Now, giving offset values of top and left, for example, would offset the element 50 00:03:04,000 --> 00:03:05,990 from its top-left corner. 51 00:03:06,000 --> 00:03:06,990 Let me show you what I mean. 52 00:03:07,000 --> 00:03:11,990 So here, we have an element called box 1, position is set to relative, and then 53 00:03:12,000 --> 00:03:14,990 we are giving it an offset of left of 100 pixels, top of 50 pixels, 54 00:03:15,000 --> 00:03:19,990 so what it will do is move over 100 pixels and down 50 pixels. 55 00:03:20,000 --> 00:03:23,990 So using this method, you can simply nudge an element over a little or 56 00:03:24,000 --> 00:03:26,990 reposition it all the way over on to the other side of the page if you wanted to. 57 00:03:27,000 --> 00:03:30,990 Now, you may have noticed this, but what's really peculiar about relative 58 00:03:31,000 --> 00:03:33,990 positioning is that it creates kind of like a hole where the element 59 00:03:34,000 --> 00:03:34,990 would normally be found. 60 00:03:35,000 --> 00:03:38,990 And instead of having elements below it move up to take its place, an empty 61 00:03:39,000 --> 00:03:41,990 space where the element would be is left behind. 62 00:03:42,000 --> 00:03:46,990 This empty space would even change sizes if the element would change size as well. 63 00:03:47,000 --> 00:03:49,990 Most relative positioning is actually set without any offsets at all. 64 00:03:50,000 --> 00:03:51,990 So here we would just say box 1, position relative, 65 00:03:52,000 --> 00:03:53,990 with no left and top values. 66 00:03:54,000 --> 00:03:54,990 Now what does that do? 67 00:03:55,000 --> 00:03:57,990 Well, it just merely gives the element a positioning value. 68 00:03:58,000 --> 00:03:59,990 Why is this so important? 69 00:04:00,000 --> 00:04:03,990 Well, for that, we need to look at absolute positioning. 70 00:04:04,000 --> 00:04:07,990 Absolute positioning is not considered part of normal document flow. 71 00:04:08,000 --> 00:04:12,990 In fact, it removes the element from normal flow and repositions it based on 72 00:04:13,000 --> 00:04:13,990 those offset values given. 73 00:04:14,000 --> 00:04:15,990 So let's take a look at an example of that. 74 00:04:16,000 --> 00:04:19,990 So here we have the same box 1, position: absolute, 75 00:04:20,000 --> 00:04:21,990 and its left set to 100 and its top set to 50. 76 00:04:22,000 --> 00:04:26,990 Now, any element below the absolute position element now moves up to take 77 00:04:27,000 --> 00:04:27,990 the element's place. 78 00:04:28,000 --> 00:04:30,990 So unlike relative positioning where you had that sort of hole left above it, 79 00:04:31,000 --> 00:04:34,990 notice that in this case box 2 and box 3 move up because box 1 has been removed 80 00:04:35,000 --> 00:04:35,990 from normal document flow. 81 00:04:36,000 --> 00:04:37,990 The browser really doesn't see it there anymore. 82 00:04:38,000 --> 00:04:41,990 Where absolute positioning elements get really tricky is how to calculate where 83 00:04:42,000 --> 00:04:44,990 the element is going to be positioned. 84 00:04:45,000 --> 00:04:48,990 Essentially, an absolutely positioned element looks to the nearest parent 85 00:04:49,000 --> 00:04:49,990 element that has positioning. 86 00:04:50,000 --> 00:04:54,990 If no elements are positioned above it, it simply looks to the body tag. 87 00:04:55,000 --> 00:04:57,990 Now, that means that the actual viewport itself is used to position the element. 88 00:04:58,000 --> 00:04:58,990 Let me give you an example here. 89 00:04:59,000 --> 00:05:03,990 If I took this div tag and positioned it using an absolute positioning at the 90 00:05:04,000 --> 00:05:07,990 top-left value of 20 and 40, it's going to start at the top-left corner of the 91 00:05:08,000 --> 00:05:11,990 screen, go 20 pixels over to the right, and then 40 pixels down. 92 00:05:12,000 --> 00:05:16,990 Notice that this happened because the parent element, content in this case, wasn't positioned, 93 00:05:17,000 --> 00:05:18,990 so it went up to the body tag. 94 00:05:19,000 --> 00:05:22,990 If, on the other hand, the div's parent element was positioned, for example, here 95 00:05:23,000 --> 00:05:26,990 giving content a position relative, notice that div would then be offset from 96 00:05:27,000 --> 00:05:29,990 its top left-hand corner, not the page's. 97 00:05:30,000 --> 00:05:32,990 If you look at other people's CSS, you are going to see this technique used over 98 00:05:33,000 --> 00:05:36,990 and over again as a way of positioning child elements within their parents. 99 00:05:37,000 --> 00:05:39,990 So it will give the parent element, the section element position of relative, 100 00:05:40,000 --> 00:05:44,990 then they could use absolute positioning to move an element or two around inside of it. 101 00:05:45,000 --> 00:05:48,990 Now, you may remember that we had one more positioned value, fixed. 102 00:05:49,000 --> 00:05:52,990 Fixed elements are considered to be absolutely positioned, but they're always 103 00:05:53,000 --> 00:05:55,990 positioned relative to the active viewport. Now, what does that mean? 104 00:05:56,000 --> 00:06:01,990 Well, the important part of that statement is what is meant by the active viewport. 105 00:06:02,000 --> 00:06:05,990 If you position, for example, a fixed element at the top-right offset of 50 106 00:06:06,000 --> 00:06:09,990 pixels and 100 pixels, the top-right corner of the element will be positioned 107 00:06:10,000 --> 00:06:11,990 50 pixels over to left and 100 pixels down. 108 00:06:12,000 --> 00:06:14,990 So that's just like absolute positioning. 109 00:06:15,000 --> 00:06:19,990 But since it's relative to the active viewport, scrolling page content would not 110 00:06:20,000 --> 00:06:20,990 affect this element at all. 111 00:06:21,000 --> 00:06:24,990 It would remain in that position, no matter how the screen was resized or scrolled. 112 00:06:25,000 --> 00:06:26,990 It truly is fixed. 113 00:06:27,000 --> 00:06:28,990 Another thing that's very important to point out here when discussing 114 00:06:29,000 --> 00:06:33,990 positioning is how positioned elements can stack one on top of the other. 115 00:06:34,000 --> 00:06:38,990 This layering can even be controlled by the z-index property, which allows you 116 00:06:39,000 --> 00:06:40,990 to control which elements are on top of others. 117 00:06:41,000 --> 00:06:45,990 Now, by default, positioned elements will appear on top of non-positioned 118 00:06:46,000 --> 00:06:48,990 elements if those two elements overlap. 119 00:06:49,000 --> 00:06:50,990 Well, this barely scratches the surface of what's possible when 120 00:06:51,000 --> 00:06:51,990 positioning elements. 121 00:06:52,000 --> 00:06:55,990 But hopefully this has been a solid introduction for you into the concept of 122 00:06:56,000 --> 00:06:59,990 positioning elements and how you can manipulate a document's normal flow to 123 00:07:00,000 --> 00:07:10,000 reposition elements based on your specific layout needs.