Relative positioning is actually considered part of the normal flow positioning model, as
the position of the element is relative to its position in the normal flow. By contrast,
absolute positioning takes the element out of the flow of the document, thus taking up no
space. Other elements in the normal flow of the document will act as though the
absolutely positioned element was never there
Because absolutely positioned boxes are taken out of the flow of the document, they can
overlap other elements on the page. You can control the stacking order of these boxes by
setting a property called the z-index. The higher the z-index, the higher up the box
appears in the stack.
The main problem people have with positioning is remembering which type of
positioning is which. Relative positioning is “relative” to the element’s initial
position in the flow of the document, whereas absolute positioning is “relative”
to nearest positioned ancestor or, if one doesn’t exist, the initial container block.
Example:function Label(text, posTopPix, posLeftPix){
this._label = document.createElement("span");
this._label.innerHTML = text;
this._label.style.position = "absolute";
this._label.style.top = posTopPix + "px";
this._label.style.left = posLeftPix + "px";
}_collapsiblePanel.style.clear = “both”;
_collapsiblePanel.style.position = “relative”;_label = new Label(monitorName, 0, 0);
_collapsiblePanel.appendChild(_label._label);
Absolutely positioning a box in relation to a relatively positioned ancestor
works well in most modern browsers. However, there is a bug in IE 5.5 and IE 6
on Windows. If you try to set the position of the absolutely positioned box rela-
tive to the right or bottom of the relatively positioned box, you need to make
sure the relatively positioned box has some dimensions set. If not, IE will incor-
rectly position the box in relation to the canvas instead.
