HTML and CSS Reference
In-Depth Information
but as a possession for all time.
</p>
</body>
<
/html>
.
Output
FIGURE 8.17
A page that uses
relative positioning
for an element.
You can spot the problem right away on this page—the relatively positioned element
overlaps the paragraph above it. I used a negative value for the
top
property to move the
element up 50 pixels, and also moved it to the left 50 pixels. The hole where the content
would normally be positioned if I were using static positioning remains exactly the same
as it would had I not moved the element, thus creating whitespace before the third para-
graph. However, due to the positioning, the paragraph has been moved up so that it over-
laps the one above it.
By default, the backgrounds of elements on an HTML page 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
two
, the page looks like
the one in Figure 8.18.
In this example, transparency is probably
not
the effect I'm looking for. However, taking
advantage of this transparency can be a useful effect when you create text blocks that
partially overlap images or other nontext boxes.
