Using Relative Positioning


You also can position elements in a relative way, where they're 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 style attribute to relative , and then you set properties such as left and top to specify the new relative position. What is the element being positioned relative to? It's positioned with respect to the place the browser would normally display the element if you didn't move it yourself.

Here's an example. In this case, I'm moving some text up six pixels and other text down six pixels from the normal position at which the browser would place that text:

(Listing 21-10.html on the web site)
 <HTML>      <HEAD>          <TITLE>              Relative Positioning With Styles          </TITLE>      </HEAD>      <BODY>          <H1>              Relative Positioning With Styles          </H1>          I like  <SPAN STYLE="position:relative; top:-6">roller</SPAN>   <SPAN STYLE="position:relative; top:6">coasters,</SPAN> don't you?  </BODY>  </HTML> 

You can see the results in Figure 21.5, where we've positioned the two words as we want themabove other text, and below other text.

Figure 21.5. Using relative positioning.

graphics/21fig05.gif



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

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