Cascading Style Sheets/Positioning

Position Schemes
Instead of using table(s) to layout a page you can use CSS positioning. By using the CSS positioning you can make a page more dynamic. Positioning is not compatible with all browsers, so when coding it is necessary to know your audience.

Types of positioning:
 * Normal Flow/Static Positioning
 * Relative Positioning
 * Absolute Positioning
 * Fixed Positioning

The examples below are all using basically the same XHTML document. Only the CSS positioning changes. To make it easy to see what is happening with the CSS there are colored borders around the two blocks. The outer block has a blue border (, abbreviated ). The inner block has a red border (, abbreviated ). Only the rule for the inner block changes in these examples.

Normal Flow
Normal Flow is the default behavior of a web browser. You do not specify this in your style sheet since it is the default. With normal flow boxes will show up in the order that you placed them in your code, and each box level element is stacked on the next.

Static Positioning
Static positioning is applied by the declaration. This places the element in the normal flow. Since normal flow is the default it is not normally necessary to explicitly use this.

Where it is useful is over-riding another rule of lower specifity, e.g.

would absolutely position all  elements except the one whose   attribute has the value notMe.

The,  ,   and   properties are not needed since they don't influence static positioning. They are used below to show they have no influence.

Relative Positioning
The browser first lays out the element as though it was in the normal flow. The element is then displaced by the amount specified by the  or   properties and the   or   properties. A gap is left in the normal flow at the point the element should have appeared. Relative positioning does not allow an element to change size. If both  and   are specified   will be ignored in languages which are written left to right such as English. is ignored if  is specified.

Absolute Positioning
This positions a box relative to its containing block. However, unlike relative positioning the gap in the normal flow left by removing the element closes up. The containing block is the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'.

You can use any one or combination of left, top, right, and bottom properties to position the box. The co-ordinates for absolute position have (0,0) at the top left of the containing block. Increasing the value of top moves the element down the page.

Since absolutely positioned boxes are taken out of the normal flow they can be positioned anywhere on the page regardless of their position in the document's source order.

Fixed Positioning
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the browser window size. A fixed element does not move when a web page is scrolled as all other elements do. It is calculated in the same way as absolute positioning with respect to containing blocks in that it pulls the positioned box out of the normal flow.

Floating Elements
Elements can be made to float within the normal flow. Boxes are moved left or right as far as they can go. Elements after the float box will move up to fill any gap left behind thus flowing around the box with the float position.

Notice that float is not a position property, but it acts like one. Float is applied with the  property not the   property. The float is positioned to the left in the example, but you could easily make it positioned to the right. A width was added to the content block so you can see how elements after the float block move up and wrap around the area the content block does not occupy.

You must set the  property when floating block-level elements otherwise they will expand to fill the entire width of their container.



CSS/Posizionamento