In addition to absolute positioning, you can use relative positioning. When you use relative positioning, elements are positioned relative to the location they would have had in the normal flow of elements in the Web browser. To position items in a relative way, you set the position property to relative . You can also set the other properties to indicate the new relative position. In this example, I'm moving some textthe word Verus up 5 pixels from the normal position at which the browser would place this text with a new element, <SUP> . I'm using a STYLE attribute to set the relative position: Listing ch09_23.xml <?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="ch09_02.css"?> <DOCUMENT> <TITLE>The Meditations</TITLE> <AUTHOR>By Marcus Aurelius</AUTHOR> <SECTION>Book One</SECTION> <P> From my grandfather, <SUP STYLE="position: relative; top: -5">Verus</SUP>, I learned good morals and the government of my temper. </P> <P> From the reputation and remembrance of my father, modesty and a manly character. </P> <P> From my mother, piety and beneficence, and abstinence, not only from evil deeds, but even from evil thoughts; and further, simplicity in my way of living, far removed from the habits of the rich. </P> <P> From my great-grandfather, not to have frequented public schools, and to have had good teachers at home, and to know that on such things a man should spend freely. </P> </DOCUMENT> You can see the results in Figure 9-15, where the text inside the <SUP> element is positioned higher than the rest. Figure 9-15. Using relative positioning.
|