| Type: | "absolute" or "relative" |
|---|---|
| Inherited: | no |
| Used By: | All block elements |
| Default: | "relative" |
| See: | background-macro height left overflow rotate top width |
How to position the block, relative to the surrounding blocks. Valid values are:
"relative" - the block is positioned according to the normal flow of elements (top to bottom). Each block follows the previous one, and the parent block is big enough to contain it. See height.
"absolute" - the block is positioned relative to it's parent block, regardless of any other children. The parent block is not sized to contain this child, and it may overlap it's parents borders.
This is almost identical to the CSS2 specification used in HTML. The chief difference is that elements whose parent is the body element must be relatively positioned. If you need to place something on the page in a fixed position, you should use the background-macro attribute instead.
Absolute positions are often combined with the circle and shape elements to draw geometric shapes.
This example draws a French tricolour, but not in the expected order.
<div width="200" height="140" background-color="white">
<div id="thirdcolumn" position="absolute" background-color="red"
x="67%" height="100%" width="33%"/>
<div id="firstcolumn" position="absolute" background-color="blue"
x="0%" height="100%" width="33%"/>
</div>