Press access key 6 for more information about navigating this site.Skip navigation and move to main content.|
Positioning
This tutorial leaves out many details to keep things clear. For a definitive reference, see the standards publication. It's also important to remember that all browsers may not support a given feature or may even implement it incorrectly.
Positioning lets you define where exactly an element box will be placed. This can be relative to where it would be normally placed, relative to a parent,.....
Now, before we go on you'll have to be familiar with some basic concepts: the box model, box types and containing blocks.
The Box Model
To understand positioning in CSS you must first understand the box model. Every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins. This illustration shows you how the model looks:
The margin in this example has a dotted line, the border is in black and the padding is represented by the red color.
Margins are always transparent. Borders can have various styles. Background settings for an element apply to the area just inside the borders which includes both the padding and content areas. Margins, borders and padding are all optional but they are given a default width of zero if not specified for calculating positions and sizes. You can set different widths for each individual side (top, right, bottom and left). Margins can even have negative values.
The width and height of each box is equal to the width and height of the outer margin box but this is not necessarily the same as the width and height of the content area. A box can also contain any number of other boxes and thus creating a hierarchy where the browser window serves as the root element for this hierarchy.
Box Types
There are two basic types of boxes: block and inline.
Block boxes are elements that are formatted visually as blocks. For example, a paragraph of text. They are generated by elements such as "P", "DIV"or "TABLE".
Inline boxes are elements that do not form new blocks of content; the content is distributed in lines. For example, an emphasized piece of text within a paragraph. They are generated by tags such as "B", "I" or "SPAN" and actual content like text and images.
The box type can also be set using the "display" property. Setting a value of "block" on an inline element will cause it to be treated as a block element. If you set the display to "none", no box is created. The browser acts as if the element did not exist. Likewise, any nested elements will also be ignored, even if they specifically declare some other display value.
Containing Blocks
Block boxes serve as a containing block for boxes within them. Every element in HTML has a containing block, whether it be text, an image...
In the normal document layout, the position of each containing block affects the position of all other containing blocks in the document. The beginning position of the first paragraph will influence where the second paragraph will start and so on.
This containing block is thus also used in determining both the position of the boxes within it and the dimensions of those boxes.
For example, presume an element has this setting:
width : 50%
Its width will be set to half the width of its containing block. For any element that is not absolutely positioned, the containing block is considered to be the content edge of its most recent, block-level ancestor. If none exists, the browser window serves as the containing block.
More on positioning
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.
