Viewers: in countries Watching now:
CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.
As we mentioned in our last movie, absolute positioning is one of the three positioning schemes in CSS. When you use it to position an element, that element is removed from normal flow and no longer affects the elements around it. Nor in turn is it affected by any changes to those elements. To illustrate how this works, let's experiment with absolute positioning using the absolute.htm file, which you can find in the 04_02 directory. Just a brief look at this page shows us that it really is sort of exactly the same page we were working on, but there is one minor change.
Down here where we have our three div tags, we have a section now wrapping those div tags, and notice that the section has a class of container. And we will see the importance of that in just a moment. So I am going to scroll up to our styles. And before we do anything, let's just sort of preview the page, so that we can see what it looks like before we begin positioning our elements. So again, One, Two, and Three, just stacking right on top of each other the same way they did in the last exercise. Okay.
If I go to element1, and this time I set position to absolute and save the file, if I go back in my browser and refresh it, you can see something odd just happens. Now, One is in the same exact spot, but Two looks like it's gone, and Three has moved up. Okay. So you probably figured out from going through the float lesson what's happened here. One has been removed from normal flow, so Two and Three, they don't think it's there anymore and they just move up to occupy that empty space.
So what's really happening is we can't see element2 because it's exact same size as element1. In reality, it's just up underneath it; we just can't see it. So let's add some offsets and see what happens when we do that. So I'm going to go back into our code, go back to element1, and I am going to give it a top offset of 125 pixels and then a left offset of 125 pixels. All right! So I am going to go ahead and save that, go back into my browser, and refresh it.
Now, I've got to ask you, is that where you were expecting to see the element offset? We offset it by a left value of 125 and we offset it by a top value of 125. Now, I assure you that the offsets work exactly the same with absolute positioning as they would with relative positioning. So it moved from the left edge, it moved to the right, if you will, by 125 pixels, and it moved down 125 pixels. What's really different here, however, is the origin point that is used to move the element.
Now, if you were assuming that this was going to be the origin point from its normal document flow, that's not quite how absolute positioning works. The way absolute positioning works is it looks for the nearest containing element to have positioning, and it's just going to keep going up and up and up and up, until finally it just goes to the initial containing block, which in this case will be the HTML tag, and it says, okay, fine, I'll just do that. So in this case, really the viewport is the offset point for this particular element right now. We can change that.
For example, remember, this white box here is the body tag. So if I go back in the code and I go all the way up to our selectors--let's go up to the body selector--I can give it a position attribute as well. So remember, in order for an element to be the offset point for an absolutely position element, it has to itself be positioned. So we're just going to give it relative positioning, and we know from our last exercise that that's not going to affect the body at all. Body still stays in normal document flow. We are not offsetting body, so it's not going to move anywhere.
In fact, the only thing that we've just done to body is we've given it a position value, meaning it has position. So now, our element1, which is right here, is going to keep going up. It's going to say, hey, are you a positioned element? No, I am not. Then it's going to go up to its next containing element. It's going to say, hey, to the body, are you a positioned element? And this time body is going to say, well, yes, I am. So now it's going to use body as its starting point, and if we save this and test it, you can see that it does just that.
It starts at this point, goes 125 pixels over and 125 pixels down. So that means that in order to really gain a fair amount of control over this element, we have to know which containing block we want to be positioned and how it's going to move in relation to that containing block. So if we go up, currently we are using body, but what we want to use is this container. So I am going to go to the container and I am going to choose position: relative. So if you've ever looked through anybody's code, and I know when I was first learning CSS--and I will be honest with you, I still do it now-- I would go to sites that I really admired and I'd say, wow, that's a really neat layout, and I would take a look at their CSS, and I would just sort of go through it and see how they were doing different things and what kind of techniques they were using.
And this is something I used to see a good bit. I would see position: relative, and then I wouldn't see any offsets, and I'd be like, what in the world are they doing with that? And it wasn't until I really learned about absolute positioning that the light bulb when off and I said, oh, oh, okay. So basically anything inside container that's going to be absolutely positioned is now going to move relative to this container. And that's almost like grouping elements and moving them around, so it's a really cool technique. So if I save this and go back up and refresh that, so that's now going to move over and down from the top-left edge of our containing element.
So now that I know what point it's going to be moving relative to, I have a much finer degree of control over this element. So if I come back in, for example, and start changing some things--so like, let's say, for example, that I take my top value and I change that to 25 pixels, and I take the left value and I change that to, say, 150 pixels. So if I save this and preview it, you can see it sort of lines up, one right beside number two. In the last exercise we used relative positioning and we saw that how when you changed one element, because it was still in normal document flow, it affected the other elements.
For absolutely positioned elements, we really don't have that. So, for example, if I come in and told element1 to now be, let's say, 300 pixels wide and 200 pixels tall, if I save this and preview it, you can see that although it changes this, it doesn't affect Two and Three in the slightest. So when you position something as an absolutely positioned element, it totally removes it from normal document flow. You can even think of it as sort of hovering or floating over the page, and the other elements on the page just go about their business as if that element never really existed.
Now, of course this means that we have to be very careful with how we use absolute positioning, to avoid unwanted effects. For example, if I come back in and let's say that I take this left value and I only offset it by 25 pixels instead of 125. So if I save that and test it, you can see that it now covers those up. I mean, you can overlap them as well. If I up that value to, say, 75 pixels, you can see that now it's just sort of overlapping them.
So if we are not careful about how we are positioning these elements within our containers, we have some unintended side effects of overlapping elements, and usually you see that more when an element changes unexpectedly. Like, for example, if element2 had a bunch of text in it and I positioned element1 over here and the initial text only came this far, there would be no overlap. But then if somebody came in and wrote a new blog post, for example, which had a really long string of text in it, we might get some unwanted overlapping, so we need to be very careful about how we structure our layouts when we use absolutely positioned elements.
To be honest, I have seen some designers-- and I know, I told you I hadn't seen anybody create an entire layout with relative positioning--well, I have seen some designers create entire layouts using absolute positioning. While this does allow you to position the elements exactly where you want them, what you're left with when you do this as an entire layout, you're left with elements that don't relate or react to each other in any way. That means that unless the content stays exactly the same, you're probably going to end up with a really rigid layout that consists of all these overlapping elements that you really don't want overlapping.
Now, it's better to think about absolute positioning and approach it as a way to reposition elements within a container when the conditions allow it. Keep in mind that the containing element needs to be positioned as well, usually with a relative value so that the containing element remains within the normal document flow. So next up, we are going to continue to explore absolute positioning as a scheme, by working with the fixed value.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.