October 14, 2001 - Positioning Demo
October 14, 2001|
Tips: October 2001
Yehuda Shiran, Ph.D.
styleobject's position property can have three values:
"relative". It is not that trivial what the effect of each position parameter value is. Play around with the three links below and see their effect on the following layout:
This is a paragraph of text as well.Make it static | Make it absolute | Make it relative When you make it
static, the yellow paragraph becomes the first element of the parent paragraph. There are no offsets to take care of, as they are not relevant for
When you make it relative, the yellow paragraph is offset by
100 from its static position, as
oDiv.style.left = 100. Also, other elements are placed around the yellow paragraph, and never on top of it.
When you make it
absolute, the yellow paragraph is placed with an offset of
top from the window. Also, other elements ignore the yellow paragraph and overlap with it if needed.
Here is the code: