Lesson 4.2: Layouts – Absolute Positioning
In the last lesson we looked at building our layout with floating elements (primarily divisions). In this lesson, we are going to look at another method of arranging our elements: absolute positioning, abbreivated AP.
Layouts with Absolute Positioning
If you remember from the HTML Lessons, when we discussed absolute vs. relative links, we said that absolute links are absolute because they don’t rely on where the page the link is one is. Relative links are relative to the page they are on.
Well, there is also absolute and relative positioning as well. The absolute positioning is absolute because it is positioned based on actual pixels from the corner of the screen; it doesn’t matter where it is in the document. Relative positioning is relative to it’s natural location in the document flow.
You are actually already familiar with relative positioning; it is the default position value for all elements. Since we haven’t been changing it, the relative positioning is what has been causing the elements to be placed where they have been placed up until this point.
Absolutely Absolute
If you basically have all of your elements as being absolute positioned, every element’s position will be based on how many pixels you set, based on the browser. For absolute position, you use the position property and set it to absolute. Position can also take relative (the default), fixed, static, and inherited. We’ll discuss fixed and static in the next lesson.
Once you have set the position to absolute, you can use the following for properties: top, right, bottom, left to set the position. Each of those properties takes a dimension value (pixel, inches, percents, etc.) and sets the position from that edge. So, if you set top to 150pixels, the element will then be 150pixels down from the top of the page. If you set bottom to 5em, it will appear 5em from the bottom. Here are a few more examples:
Code
div {
/* 10 pixels top and 10 pixels left from the upper left corner of the screen. */
top: 10px;
left: 10px;
}
p {
/* 50 pixels from the bottom of the page */
bottom: 50px;
}
Now, this can be useful, but on more than rare occasion, this can cause trouble if you try to absolutely absolute position your elements you’ll run into a lot of trouble usually because it gets stretch or moved all around and usually broken on different resolution and browser window sizes.
A better method is to absolutely position the element within a relatively positioned parent.
Relatively Absolute
As we discussed in the last section, if all of your elements are absolutely positioned, they are based on the edges of the page. However, we have a way to give it a bit more flexibility, while still retaining the control of absolute positioning. This is to absolutely position elements within a relatively positioned parent.
When you absolutely position an element within a parent element that has it’s position explicitly set to relative, the absolutely position element is positioned based on the edges of the parent, not the screen.
Notice I said “explicitly set”. As I mentioned earlier, by default position is set to relative. However, if you place an element within one of these elements and give the child absolute position, the child will still be positioned based on the page’s edges. You have to explicitly say “position: relative” to be able to relatively absolute position something.
This technique gives us more control while still retaining the code. Thanks to this method we don’t necessarily have to implicitly set every element an absolute position. We can allow the natural page flow to manage a lot of the work for us, and then just position the children within the parent.
Dimensions by Positions
One other interesting thing to note about absolute positioning is that you can actually use it to define your height and width, instead of the height and width properties. You can do this by setting the pair of opposite positions to both have a value. For example, let’s say you have a division with position: absolute, and you set it’s left to 10px and it’s right to 10px. Assuming you don’t have a width explicitly set, the division will stretch between 10px from the left and 10px from the right, giving it a width based on the width of the window.
If a width was explicitly set it would place it either 10px from the left or 10px from the right and have the width that it is set to in it’s width property. I say “or” because it may vary between different browsers. It would usually go to the left. However, because of this uncertainty you want to avoid having width, left, and right all explicitly set.
Practice, Practice, Practice
As with division layouts, absolute positioned layouts also require a lot of practice and experience to be able to use them efficiently. A key tip for creating absolutely positioned layouts is to draw out your layout elements and determine the corner for each of these elements. Then you can easily define them. There are thousands of possible ways to arrange elements within your layout and it would be impossible to discuss them all.
Simple practice and experimentation and you’ll be able to figure out how to lay out even complex layouts. And on that note, if you plan a layout and it seems overly complex and has a lot of grouping divisions elements, take a look at your layout. There is usually a better way to implement that is a lot simpler. If it seems too complex, it usually is.
In this lesson we talked about how to layout elements using absolute positioning. In the next lesson we’ll talk briefly about setting our position to static and fixed. We’ll then compare floating and absolutely positioned layouts, and talk about how to use the two types together.
