Join Bill Weinman for an in-depth discussion in this video Using absolute positioning, part of CSS Positioning Best Practices.
There's basically four kinds of positioning in CSS. Absolute, Relative, Float and Fixed. In this lesson we're going to talk about absolute positioning. Here on the screen we have four content boxes. The outer one has this border around it and it's this dark blue, and contained within that are three absolutely positioned columns of text. Each of these are a different color for illustration purposes and their position using absolute positioning. So let's take a look at that in the source document.
Here we have an XHTML document and here is our content boxes in the XHTML. The outer box is this outer div and contain within it are three boxes with text in them, and these are named first, second and third, and the outer boxes named outer and this is with id selectors. So here's the CSS and in this case we've put it inside the document in the style container and that's just for illustration purposes. Again, I would normally put this in an external style sheet.
Here we have the outer box and you'll notice it has this position: relative, and the purpose of this is to qualify it as a containing block to contain the other positioned elements. Absolute positioning requires a containing block. If you don't provide it one, it will use the outer block of the document. The outer border of the window space in your browser will become that containing block. And so in this case we wanted to provide a containing block and in order for this to qualify as a containing block, it needs to be a positioned element and that means it needs to have a position property and that property needs to have a value of either relative or absolute.
The default position property is called static, and you'll rarely ever use that, and that simply is exactly the same as having no position at all. So if I save this and reload this document, you'll see that these positioned elements will now be positioned relative to the outer frame of the browser. I'll go ahead and put that back and save it and reload in the browser and there we have it. So in order for this outer block to qualify as a containing block for positioned elements, it needs to have this position relative, or it needs to be positioned absolute.
Reason positioned relative here, because we use positioned relative without any actual positioning, in other words it doesn't have a top or a left property, that makes it behave the same as if it had no positioning, but it's still qualifies, because it has this. It makes it qualify as a containing block for the absolute positioned elements. Now, the absolute positioned elements here, we have three of them, and they have a top property and a left property. In this case they are both 0, and the second one, the left is 250 pixels, and the bottom one, the left is 500 pixels, and this positions them absolutely relative to the containing block.
So the word absolute simply means that the coordinates are absolute relative to the boundaries of the containing block. But they're still relative to that reference point. The containing block provides reference points for the absolute positioning. Each of these elements is exactly 250 pixels wide. We've provided a width of 220, and padding of 15 pixels all around. So if you add up the left and the right here, you get 30 pixels, and you add that to the 220, you get 250 pixels. So the total width of the element is 250 pixels, and so I positioned the second one 250 pixels from the left boundary of the containing block and I've positioned to the third one 500 pixels, which is two columns over from the left boundary of the containing block, and that's what gives us this positioning here.
So we have 0, we have 250 pixels, and we have 500 pixels. This gives us this absolute positioning. Just one more thing I want to show you. If I move one of these blocks, I'm going to move the middle one over a 50 pixels here. I want to show you what happens. Make that 300 pixels over from the left boundary, I'll save it and reload, and you'll notice that now this right part of it is no longer visible, because it's hiding under this third block. The reason for this is the order in which they happen in the XHTML.
Because the second block is before the third block is actually underneath it in that third dimension. It's a two dimensional document, but there is a phantom third dimension called the z-index, which is the property that defines which elements will appear above other elements if they happen to overlap. If I were to move this block and move it down here under the third block, I'll go ahead and save that, because they're absolutely positioned, it will still be in the same place.
But it will now appear over this element on the screen. Now, if I don't want to actually move it, I'm going to hit undo a couple of times here, there we go. Instead, I can specify a z-index. So now they're in the original order. I'm going to specify a z-index here in the style, z-index: 1. Any z index at all will work, because the other ones don't have one. So that's puts them in the 0 z-index. I'll save this and reload, and now it's still over it.
If I take that out, you'll notice it will go back to behind. Go ahead and reload over here, and now it's behind. So you can specify a z-index and if you specify a z-index for all of them, you can actually control what's in front of what. The higher numbered z-index appear in front of the lower number z-index. So that's absolute positioning, and those are the things you need to know about in order to use it in your documents.
- Understanding style sheets and levels of inheritance
- Learning how to use CSS units of measure in page layout
- Laying out content on a page using absolute, relative, float, and fixed positioning
- Using CSS positioning to place menus, buttons, graphics, and columns precisely on a page
- Using templates to improve workflow
- Creating a full working web site, step by step