ptg16476052292 LESSON 11: Using CSS to Position Elements on the Page
The anonymous blocks enable the browser to create a proper page layout when inline
elements are mixed with blocks. If I were to relatively position the paragraph inside the
<div>above, the anonymous blocks are what enables the rest of the content in the <div>
to be laid out along with the paragraph.
Inline elements can also be positioned relatively and are handled in the same fashion as
block-level elements. They are positioned relative to their position in the normal flow.
If you nest relatively positioned elements, the inner element is positioned relative to the
location of the enclosing element, as shown in Figure 11.3:
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
span { background-color: white; border: 1px solid black; }
#inner { position: relative; left: 25px; top: 10px; }
#outer { position: relative; top: 10px; }
</style>
</head>
<body>
<p>
The absence of romance in my history will, I fear, detract somewhat <span
id="outer">from its <span id="inner">interest</span></span>; but if it be
judged useful by those inquirers who desire an exact knowledge of the past as
an aid to the interpretation of the future, which in the course of human things
must resemble if it does not reflect it, I shall be content.
</p>
</body>
</html>In the example, I have a <span> tag nested within another <span>. Both of the elements
are relatively positioned. As you can see, the space in the layout for both is preserved,
and the inner element is positioned relative to the outer element, which in turn isFIGURE 11.3
Relatively posi-
tioned inline ele-
ments.