static - relative - absolute - fixed - demo
There are four types of positioning available in CSS. (This does not include floats, although the float property is, in its own manner, a sort of "positioning," as well.)
These four positioning types are: static, relative, absolute, and fixed. We will deal with them very briefly here.
CSS: position: static;
Starting with the basics, static positioning is the default way items display on the page. They run completely "in the flow," with one item following the previous item. By default, a "block-level" element (such as a div, table, or a paragraph) will appear under the previous block level element.
CSS: position: relative;
Now to the tricks. Relative positioning places an element in relation to where it would be were it left static. To determine this relationship, you can offset the element by creating distance from either the top, left, right, or bottom (or a horizontal/vertical combination).
Thus, this CSS:
#mydiv {
position: relative;
top: 15px;
left: 100px;
}
. . . would shift your div down 15 pixels and 100 pixels to the right of where it "belonged."
Be aware that relative positioning does not leave the "original spot" really "vacant." The positioned element still "occupies" that space, although it is not "there" visually. You need to be aware of this, or you can end up with a lot of strange-looking gaps on your page.
For that same reason, if you use several relatively-positioned elements, they can start getting a long way away from their "original" (static) position. For example, let's say you are using negative positioning in order to get an "overlap" effect on your divs. If you use a style of top: -15px for your first overlap, you will need a top: -30px for your second one, if you want your overlaps to match. And funny things can start happening on your page. So be careful!
Relative positioning is also used to "place" an absolutely-positioned element inside its container; see below.
CSS: position: absolute;
Absolutely-positioned elements are taken out of the flow of the page altogether. An absolutely-positioned item does not influence the placement of any page element that is outside of it. Thus, you can run other items over top or underneath absolutely-positioned elements, so you need to be careful.
By default, an absolutely-positioned element is placed relative to the body of the page. Thus, this CSS:
#mydiv {
position: absolute;
top: 115px;
left: 25px;
}
. . . would result in a div placed 115 pixels from the top of the page, and 25 pixels from the left side of the window - no matter where #mydiv was placed in your HTML.
You can, however, absolutely position your elements inside other elements. To do that, two things are necessary: you must give (non-static) positioning to your containing element; and you must place ("nest") your absolutely-positioned element inside the containing element in your HTML.
Here is an example:
#wrapper {
position: relative;
width: 700px;
padding: 20px;
}
#mydiv {
position: absolute;
top: 140px;
right: 15px;
width: 200px;
}
. . . and in the HTML:
<div id="wrapper">
<div id="mydiv">
</div>
</div>
The above would result in #mydiv being placed 140 pixels from the top of your #wrapper div, and 15 pixels from its right edge. Note that this means #mydiv is ignoring the 20 pixel padding we gave to #wrapper. This is because an absolutely-positioned element is "out of the flow;" it ignores margins and padding. (Hence, if you have a 25px margin on your body tag ("selector," in CSS terms), you can still butt an absolutely-positioned div up against the edge of the window.)
Note 1: do not absolutely position elements inside a table. See these "Ten Layer Laws" for explanation (off-site).
Note 2: unlike a static or relatively-positioned block element (which flow to the width of their container), absolutely-positioned ones have no intrinsic width at all; they are dependent on what is inside. Thus, if you are using an absolutely-positioned div to create e.g. a coloured stripe across your page, you will need to specify a width (as well as a height, or at least a specified border, obviously) for it to display.
CSS: position: fixed;
If absolute positioning places an element relative to the body, one might say that fixed positioning places it relative to the browser window. The idea of fixed positioning is that it "floats" in the same position no matter how much the user scrolls the page. Thus, according to the standard, this CSS:
#mydiv {
position: fixed;
top: 40px;
right: 40px;
}
. . . would result in your div sticking to the upper right of the user's browser (40 pixels from the top and right side), even if the user was looking at the bottom of a web page running (in print) 40 pages long.
There's only one problem.
Internet Explorer, all the way through 6.0, did not support fixed positioning. Instead, position:fixed; in older IE comes out pretty much as absolute positioning. (This was rectified in IE 7.)
For a good demo of the difference between relative and absolute positioning, see the example Murray Summers of Great Web Sights has put together here.
Click on the monitor for more info about a site.