How Absolute Positioning Works5:36 with Guil Hernandez
The CSS position property gives you precise control over your page layout. CSS positioning makes it easy to place elements, like a menu or an icon, anywhere on the page. This video covers a simple example of how absolute positioning works.
- Elements with absolute positioning are neither affected by or do not affect other elements in the normal flow of the page.
- They are like layers in Photoshop or Illustrator; you're free to place them anywhere you wish on the page.
- Positioned elements rely on you telling the browser where to place them, using values called positioning offsets, for the element's top, right, bottom or left position.
- When you use absolute positioning, you place the absolutely positioned elements in relation to a parent container; the parent container is the positioning context.
- You can change the positioning context to other containing elements; this lets us position elements precisely where we want them.
[MUSIC] 0:00 Now that you know the basics of CSS layout, and you've built the layout for 0:05 a simple web page, it's time to learn another useful CSS layout technique, 0:08 positioning elements with relative, absolute and fixed positioning. 0:12 The CSS position property gives you even more precise control of your page layout. 0:17 CSS positioning makes it easy to place elements like a menu or 0:22 an icon anywhere on the page. 0:26 You can add text captions over images and make sure your navigation stays 0:28 at the top of the page, even when your users scroll down the page. 0:32 So coming up in this section of the course, 0:36 you'll learn how CSS positioning works. 0:38 Then you'll use those skills to enhance parts of the best city guide layout. 0:41 First, I'm gonna show you a simple example of how absolute positioning works. 0:45 You can follow along by launching the workspace on this page. 0:49 So this is a simple, vertical menu. 0:53 All items are nested inside the ul with the class main-nav. 0:56 And some list items have classes, like ice-cream and tea. 1:01 Back in the browser preview, the area with the turquoise background color 1:05 is the containing main-header div, and 1:10 the light gray area that you see is the body of the page. 1:14 I simply gave the body a light gray background color in the CSS. 1:18 So I'm gonna target the list item with the class ice cream, 1:24 which is the first item in the list. 1:27 Back in my CSS, I'll scroll down to the position styles, 1:30 and notice what happens when I give the list item with the class ice-cream 1:34 a position property and the value absolute. 1:39 When I refresh the browser, the top ice cream item is taken out of the normal flow 1:45 of the list, and placed in the top left corner of the parent ul element. 1:50 And the other list items no longer honor the original space 1:55 of the top ice cream item. 1:59 In fact, if I resize the browser window, 2:02 notice how it's positioned above the content. 2:04 It's like the other content on the page doesn't 2:08 even know this positioned element exists. 2:10 This is the natural behavior of elements positioned absolute. 2:13 You see, elements with absolute positioning are neither affected by or 2:17 do not affect other elements in the normal flow of the page. 2:21 They're like layers in Photoshop or 2:25 Illustrator, you’re free to place them anywhere you wish on the page. 2:26 But they do rely you telling the browser where to place the element using values 2:31 called positioning offsets for the elements top, right, bottom, or 2:35 left position. 2:40 Back in the CSS, I'm going to give the ice-cream list item 2:41 a top offset using the top property. 2:45 And I'm going to set the value to 0. 2:49 Then, I'll add a left offset with the left property and 2:52 I'll set the value to 0 as well. 2:57 So when I save my style sheet and refresh the page, 2:59 notice how the list item is now placed in the top left corner of the browser window. 3:03 You can place an element anywhere on the page using the positioning offsets top, 3:10 right, bottom and left. 3:15 But you don't need to use all four of these offsets. 3:17 Here I'm only using two offsets, but you could also use just one offset. 3:20 So let's try two other offset values. 3:25 I'll change the top offset from 0 to 100 pixels and 3:28 I'll make the left offset 50 pixels. 3:33 So back in the browser preview, when I refresh the page, 3:38 you can see how the offsets moves the list items 100 pixels away 3:42 from the top edge of the page and 50 pixels away from the left edge. 3:48 So, now let's try positioning the list item with the class tea. 3:55 Back in my style sheet, 4:00 I'll give the list item with the class tea a position property. 4:01 And I'll set the value to absolute. 4:06 Then I'll give it a right offset of 0 and a bottom offset of 0. 4:10 So when we refresh the page, 4:17 notice how it shifts the list item over to the bottom right corner of the page. 4:19 You can also use percentage and em values as offsets. 4:27 So for example, back in my tea rule I'll change the right offset value 4:30 to 6em and the bottom value to 50%. 4:36 These offset to move the list item 6em or 96 pixels away 4:42 from the right edge of the page and 50% away from the bottom edge. 4:47 When you use absolute positioning, 4:55 you place the absolutely positioned element in relation to a parent container. 4:57 And the parent container is the positioning context. 5:03 Currently, the positioning context of the list items is the browser viewport. 5:07 So, any offset values defined 5:12 places the elements in relation to the edges of the browser. 5:15 But, the positioning context can be changed to other containing elements 5:19 like main-header or main-nav. 5:23 This lets us position elements precisely where we want them. 5:27 In the next video, 5:31 you'll learn how to change the positioning context with relative positioning. 5:31
You need to sign up for Treehouse in order to download course files.Sign up