Positioning Elements Absolutely

The elements in your Web page generally flow in the order in which they appear. That is, if the img tag comes before the p, the image appears before the paragraph. You can take elements out of the normal flowand position them absolutelyby specifying their precise position with respect to the nearest positioned ancestor or to the body.

Figure 11.30. Our photo is still sitting above the text in the photo_text div. We want to shift it down into the space that we've set aside in the left margin.

To position elements absolutely:

1.	Type position: absolute; (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 ancestor (10px, or 2em, for example), or as a percentage of the ancestor.
3.	If desired, repeat step 2 for additional directions separating each property/ value pair with a semicolon as usual.
4.	If desired, add position: relative to the ancestor element to which you want your absolutely positioned element to be offset. If you skip this step, the element will be offset with respect to the body.

Figure 11.31. First we set the position for the photo_text class so that the photos will be positioned with respect to it (and not to the body). The negative left offset will pull the photo left and out of the photo_text box.

Figure 11.32. Wherever the photo_text class goes, the photo will be stuck to its left side. Remember that the text in photo_text does not move out of the way for the photo. We pushed it away by giving it a left margin of 110px on page 176.

Tips

• Use percentages or ems for liquid designs that adapt to your visitors' preferences.

• Because absolutely positioned elements are taken out of the flow of the document, they can overlap each other and other elements. (This is not always bad.)

• If you don't specify an offset for an absolutely positioned item, the item appears in its natural position, but does not affect the flow of subsequent items.

• Positioning is not inherited.