Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

Positioning Elements

Elements within a web page fall where they are placed in the document but can be moved about by changing an element’s position property from the default of static to one of absolute, relative, or fixed.

Absolute Positioning

An element with absolute positioning is removed from the document and any other elements that are able to will flow into its released space. You can then position the object anywhere you like within the document using the top, right, bottom, and left properties. It will rest on top of (or behind) other elements.

So, for example, to move an object with the ID of object to the absolute location of 100 pixels down from the document start and 200 pixels in from the left, you would apply the following rules to it (you can also use any of the other units of measurement supported by CSS):

#object {
    position:absolute;
    top     :100px;
    left    :200px; }

Relative Positioning

Likewise, you can move the object relative to the location it would occupy in the normal document flow. So, for example, to move object 10 pixels down and 10 pixels to the right of its normal location, you would use the following rules:

#object {
    position:relative;
    top     :10px;
    left    :10px; }

Fixed Positioning

The final positioning property setting lets you move an object to an absolute location, but only within the current browser viewport. Then, when the document is scrolled, the object remains exactly where it has been placed, with the main document scrolling beneath it—this is a great way to create ...