CSS gives developers the ability to precisely place any element on the page. Positioning allows you to create boxes and then pull them out of the normal flow. The position property specifies the reference point for the positioning of each element box. It is also more challenging than almost any other CSS property, so it is important to get a firm understanding of how it all works and even then, should be used wisely and only when needed.

As the author of our Stylin' textbook says:

If you use margins and padding carefully, in most cases, all you need to achieve your layout is static positioning. Many beginning CSS designers mistakenly set the position property of almost every element only to find it hard to control all these freed-up elements. Don't change the position property of an element from static unless you really need to. -Charles Wyke-Smith

...and as Holzschlag says:

Become the Control Freak Zen Master! You want total control but then you realize that you have no control! So, you go Zen or you go Gray! -Molly Holzschlag

In our exploration of CSS in prior weeks we have been working almost entirely in the 'normal flow of the document.' Our HTML element boxes march down the page in an orderly fashion, one after the other, as if drawn on a single sheet of paper. With the introduction of floats, things begin to shift a bit and become more fluid, interesting, and complex. In the next few pages I will introduce the position property which now takes our document fully into the realm of three dimensions! With three dimensions comes the possibility of layering or stacking elements in front or behind each other like a collage. This will be addressed with a discussion of the z-index property.

Without further ado, we will begin our exploration of the position property by establishing a few basics.

A Few Definitions...

Viewport
1) the entire scrollable region of data that is viewed through a window
2) the browser window
3) the screen of a hand-held device
Containing Block
As established last week, element boxes act as a containing block Open in a New Window for any nested element boxes within them.
In positioning, the initial containing block is the root element established by the user agent. In HTML, this is technically the HTML tag but according to some authors and, for most practical purposes, we can think of this as being the BODY tag.
This initial containing block is a rectangle the size of the viewport (in most browsers) and is used to determine both the position of the element boxes within it and, in some cases, the dimensions of those boxes.
As we established when discussing the box model, the containing block is the content edge of an element's most recent, block-level ancestor. This holds true for any element that is styled with static or relative positioning.
Example: BODY is the containing block for the DIV element, DIV is the containing block for the P element, and the P element is the containing block for the IMG element.
<body> <div> <p><img src="example.gif" alt="example" /> DIV is the containing block for this paragraph and this paragraph is the containing block for the IMG element.</p> </div> </body>
For non-root elements that have a position value of absolute, however, the containing block is the most recent ancestor of any kind which has a position value other than static (i.e. a containing block styled with a position value of absolute, relative, or fixed). If there are no such positioned ancestors, then the absolutely positioned element's containing block is the BODY element.

Resources: