Relative Positioning

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.

graphics/09fig15.gif



Real World XML
Real World XML (2nd Edition)
ISBN: 0735712867
EAN: 2147483647
Year: 2005
Pages: 440
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net