Press access key 6 for more information about navigating this site.Skip navigation and move to main content.|
Positioning Schemes
With positioning you can exercise more control over where content is displayed. This said you need of course properties which express the position of the containing block. These properties are known as the "offset" properties aka as "side-offset" properties. These properties must be used in order to position an element depending on the position scheme you use.
Thus enter the following position schemes that actually accomplish the positioning: normal, relative, absolute and fixed (there's is also "inherit" but we'll leave this one unspoken for). Each has its own set of rules.
What is extremely important is the concept of "the normal flow" of a document.
It is how elements are normally rendered in the document without using any positioning. It is the default mode and applies to any element that does not specify position:absolute or fixed and is not floated.
Block boxes flow vertically starting at the top of their containing block with each box placed directly below the preceding one.
Vertical margins are collapsed in the normal flow. This means, instead of adding the bottom margin of a box to the top margin of the one immediately below it, only the larger of the two values is used, as illustrated here:
Horizontal margins are never collapsed.
Inline boxes flow horizontally from left to right. They are wrapped as needed, moving down to a new line when the available width is exceeded.
Side Offsets
Before we talk about the different positioning schemes, we need to address the side offset properties. Three of the positioning schemes (relative, absolute and fixed) use four distinct properties to describe the offset of a positioned element's side with respect to its containing block.
These properties are called "top", "right", "bottom" and "left". None of them are inherited and can be applied to any element.
The offset properties describe an offset from the nearest side of the containing block. For instance, the property "top" describes how far the outer top edge of the element must be placed from the top of its containing block.
In case of "top", a positive value moves the top edge downward and a negative value moves it above the top of the containing block. "Left" describes how far to the right (using positive values) or left (using negative values) the outer left edge is from the left edge of the containing block.
An easy way to remember this is to think of it as positive values moves the edges toward the center of the containing block, negative values moves them away.
You should also note that the side-offset properties define offset from the analogous side (left defines from the left side) of the containing block and not from the upper-left corner of the containing block.
By offsetting the outer edges of a positioned element, everything about that element (margins, borders, padding and content) is moved.
More on positioning
- Intro
- Current
- Schemes: sequel
- Stacking and z-index
Some more scribbles for you to look at.
More Pages
Links to other parts of the site.
Friends
People who have been good enough to me that I would call them friends.
You can get your W3C stuff at the W3C site
It's has all the specifications you need, some tutorials and also validation tools. If you get into CSS you'll be needing this link !
Unless otherwise expressly stated, all original material of whatever nature created by Dzinelabs and included in this site and any related pages, including the weblog's archives, is licensed under The Creative Commons License.
