ptg16476052290 LESSON 11: Using CSS to Position Elements on the Page
Output ▼
As you can see, the relatively positioned paragraph is shifted up and to the right from its
natural position in the layout. You can also see that its position on the page is preserved
and that the size I specified for the element is taken into account.
I used a negative value for the top property to move the element up 30 pixels, and I spec-
ified a left offset of 30 pixels, which actually moves the element 30 pixels to the right.
To move the element to the left, I could have used a negative left offset or a positive right
offset. The spot in the layout where the paragraph would be in the normal flow remains,
creating whitespace before the third paragraph. The relative positioning of the paragraph
causes it to overlap its predecessor.
By default, the element backgrounds are transparent. I added a background color to the
relatively positioned box to more clearly illustrate how my page works. If I remove the
background-color property from class offset, the page will look li ke Figure 11.2.
In this example, transparency is probably not the effect I’m looking for. However, taking
advantage of this transparency can be useful when you create text blocks that partially
overlap images or other non-text boxes.FIGURE 11.1
A page that uses
relative positioning
for an element.