Offsetting Elements in the Natural Flow

Best javascript editor debugger Ajax website
↑

Main Page

Offsetting Elements in the Natural Flow

Each element has a natural location in a page's flow. Moving the element with respect to this original location is called relative positioning. The surrounding elements are not affectedat all.

Figure 11.25. Although the date is aligned to the right, it is on a separate line than the header element and thus appears below it.

To offset elements within the natural flow:

1.	Type `position: relative;` (don't forget the semicolon; the space is optional).
2.	If desired, type `top`, `right`, `bottom`, or `left`. Then, type `:v`, where v is the desired distance that you want to offset the element from its natural location, either as an absolute or relative value (10ps, or 2em, for example) or as a percentage.
3.	If desired, repeat step 2 for additional directions, separating each property/ value pair with a semicolon as usual.

Figure 11.26. Remember to both specify the relative positioning and also give the offset. Using ems will keep the offset in proportion with the size of the text.

Figure 11.27. By applying a negative offset to the date, we push it up into the preceding block's space. In this case, that results in the date being aligned with the section title. The succeeding elements are not affected at all.

Tips

The "relative" in relative positioning refers to the element's original position, not the surrounding elements. You can't move an element with respect to other elements. Instead, you move it with respect to where it used to be. Yes, this is important!

Figure 11.28. Here we'll indent the description from the left edge slightly and pull it up slightly with a negative margin.
The other elements are not affected by the offsetsthey flow with respect to the original containing box of the element, and may even be overlapped.
Offsets don't work unless you're also using the position property.
Positioning is not inherited.

Figure 11.29. Notice how the description (that begins with capturing) is now offset to the right under photobarcelona.

Best javascript editor debugger Ajax website
→

Offsetting Elements in the Natural Flow

Figure 11.25. Although the date is aligned to the right, it is on a separate line than the header element and thus appears below it.

Figure 11.26. Remember to both specify the relative positioning and also give the offset. Using ems will keep the offset in proportion with the size of the text.

Figure 11.27. By applying a negative offset to the date, we push it up into the preceding block's space. In this case, that results in the date being aligned with the section title. The succeeding elements are not affected at all.

Figure 11.28. Here we'll indent the description from the left edge slightly and pull it up slightly with a negative margin.

Figure 11.29. Notice how the description (that begins with capturing) is now offset to the right under photobarcelona.