Position Demonstration: Relative

Watch the third paragraph

This is the first paragraph in the positioning demonstration. The goal is to demonstrate the differences between the four position property values: static, relative, absolute, and fixed. Every element is positioned with respect to another element, its containing element. The position of the element can be changed by changing the value of its position property.

This is the second paragraph in the positioning demonstration. The goal is to demonstrate the differences between the four position property values:static, relative, absolute, and fixed. This is a place holder for comparison.

This is the third paragraph in the positioning demonstration. This paragraph has an "id" so its position value may be changed, without affecting the other paragraphs. This paragraph's position will change based on its position value.
In this case the position is relative. It has moved down 50 px and to the right 50 px from where is was stacked below the second paragraph. See how it overlaps other content.

This is the fourth paragraph in the positioning demonstration. The goal is to demonstrate the differences between the four position property values:static, relative, absolute, and fixed. This paragraph is a placeholder for comparison.

Position Values

• Static: This is the default position value. Block level elements stack down, separated by margins. Adjacent margins collapse, taking on the value of the greater margin.
• Relative: This value moves the element away from or relative to its original position. Paragraph 3 was originally stacked below paragraph 2 and above paragraph 4. From this original position, "relative" assigns top, right, bottom and/or left values to the element. The element will shift accordingly. Negative values may also be used.
• Absolute: This value takes the element out of its original flow or stacking order. The positioning context of "absolute" is the upper left corner of its container which in this case is the "body" tag. The element which is assigned an absolute position will move in conjuction with its container (body tag). If you scroll enough, this element will disappear off the page.
• Fixed: This value is similar to "absolute" in that it is removed from the document flow and takes its postioning from its container which is the "body" tag in this example. The big difference is that "fixed" elements do not move when the page is scrolled. This is effective for having a background image that stays in place when the viewer scrolls.