|Property Name||Some Possible Values||What It Does|
|position||relative | absolute | fixed||Sets type of positioning|
|top||20px | 10%||Offsets element from top|
|left||20px | 10%||Offsets element from left|
|bottom||20px | 10%||Offsets element from bottom|
|right||20px | 10%||Offsets element from right|
positionproperty can be used to define how an element is displayed with respect to the normal flow. The values you can use are described in the following:
relative- The element is positioned relative to the normal flow. This may be used in conjunction with the offset properties.
absolute- The element is removed from the normal flow and positioned with respect to its containing block. This may be used in conjunction with the offset properties.
fixed- Same as
absoluteexcept the element is fixed in place (not supported by Internet Explorer 6).
static- The element is positioned normally. (Offset properties do not apply).
blockquote, are typically stacked vertically one on top of the other:
Aare typically lined up horizontally until available space runs out after which the content will break to a new line:
bodyelement. This root element represents the browser viewport and —by default— becomes the containing block for all other elements on your web page. Absolutely positioned elements are offset with respect to the border of this principal containing block.
positionproperty and setting the value to anything but
divelements in Example 1 and put them all inside another
divelement. Then we'll use the
positionproperty, set it to
relativeand, presto... we have a containing block. For demonstrational purposes, let's give it a red border and set its width to 300 pixels. Elements inside this containing block may be now absolutely positioned with respect to its borders.
divrelative to the normal flow.
positionproperty on the green
divand set it to
relative. Now we can use the
leftproperties to offset the
divelement from its normal position:
divelement, for example, displayed exactly there regardless of what else is going on. This can be accomplished using absolute positioning. This kind of positioning will remove the element from the normal flow such that it may be offset from the edge of its containing block. Let's take the green
divin Example 4 and simply change the value of the
absolute. The following result is what we get:
positionproperty is set to anything but
static. The offset properties shift the element away the specified side of the containing block according to a specified distance. Any CSS length measurement may be used as the value but it's probably easiest to stick with either pixels or percentages.
leftproperties together would shift the element away from the top/left corner. Likewise you could combine the use of the
rightproperties together. Using the
leftproperties together just simply wouldn't make sense.
divis absolutely positioned. Then it is offset 5 pixels from the top and 10 pixels from the left:
floatproperty. The next page in this tutorial will give you the lowdown on how to create floats and how to align text...
If you need a .COM web address, you can get one quick and easy at...
|<~ BACK||TOP||NEXT ~>|