Absolute Positioning

You can use the position property to set the position of elements in a Web page. I'll take a look at positioning items in absolute terms in this section and in relative terms in the next section. Here are the properties you commonly use when working with positioning:

• position Can hold values such as absolute and relative

• top Specifies the offset of the top of the element

• bottom Specifies the offset of the bottom of the element

• left Specifies the offset of the left edge of the element

• right Specifies the offset of the right edge of the element

In this example, I'll set the absolute position of the image we used in the previous example so that it's directly on top of the text:

Listing ch09_22.css

 TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; }  IMG {background: url(/books/1/264/1/html/2/image.jpg) no-repeat center center;   height: 66px;   width: 349px;   position:absolute; left:50; top:160;   border-width: thick}  

You can see the results in Figure 9-14. As you see there, the image has indeed moved so that it's now on top of the text. Using this technique, you can place elements as you like.

Figure 9-14. Using absolute positioning.