Positioning

CSS properties for CSS Positioning (CSSP) can be applied to particular objects.

The primary CSS properties for CSSP are position and float. Position has three possible values:

• static. This is the default: normal flow, regular old HTML positioning. The left and top properties do not apply.
• relative. This is almost like static except that you can offset the object from its normal HTML position. Relative positioning does reserve the space of the item's original position, i.e. it makes other items flow around the space where the item would have been. Relatively positioned objects moved off screen will not cause scroll bars to appear.
• absolute. This positions items relative to the top left corner (0,0) of the next positioned parent, or, if there isn't one, the body by default. To avoid using the body as the reference, sometimes an absolutely positioned box is set relative to some inline content that has its position property set to relative. Absolute positioning does not reserve the space of the item's original position, i.e. if other items are displayed at the new position, then both will be drawn. The left, right, top, and bottom properties apply. Absolutely positioned objects moved off screen will cause scroll bars to appear. Absolutely positioned objects have padding and borders but no margins.
• fixed. Like absolute except that the box is fixed in respect to the view port. EGs: The box does not move when the page is scrolled or is at a specific spot on each printed page. Not implemented by MS.

Once the position property is set to absolute or relative, set at least one of these style properties: bottom, left, right, and top. Positioned objects can overlap or under-lap objects at the new position using the z-index property.

The objects that support CSSP depend on the browser:

• Netscape Navigator 4:
  • Can apply relative positions to X, where X equals block elements, spans, and tables.
  • Can apply relative or absolute positions to X.
  • The only container recognized is the browser window itself.
• Microsoft Internet Explorer 4:
  • Can apply relative positions to any page element.
  • Can apply absolute positions to X, images, applets, objects, buttons, input elements, select lists, and text areas. IE can also apply absolute positioning to these elements unique to IE: fieldsets and iframes.
  • The containers recognized include the browser window itself, and divisions, including nested divisions.

Fractions of block elements cannot be positioned. Either the whole block element gets positioned or nothing.

Block formatting involves boxes (elements, tags) that cause line breaks before and after itself, i.e. boxes are laid out vertically. Examples include <p>, <h1>, lists, and tables. Inline formatting involves boxes that are laid out horizontally. EG: Divisions and spans both mark sections of web pages but divisions (<div>) are block elements and spans (<span>) are not. That is, a span can be smoothly included within a paragraph but a division would add line breaks. For more see my section on HTML.

A float is a box that is shifted to the left or right on the current line with the float property. The width property of a floated box must be specified. The content float may be either a block or an inline block but the float property generates a block box. Content flows on the other side of a float, i.e. a box floated left will be shifted to the left and have content flowing on its right. When an object clears a side with the clear property, it increases its top margin until it clears an objects floated on the specified side. The order of floated boxes is relevant. EG: If 2 boxes are both floated left, then the 2nd one will be displayed left most.

There are many tricks that can be done with CSSP. [I used to have some examples but I made them long ago and they're way out of date. Plus there are many other good examples on the net.]

2007-08-15 17:55:52Z