Using Absolute Positioning | Inside JavaScript

Here's a powerful one. You can use the position property to set the position of elements in a web page. I'll take a look at positioning items absolutely in this section and relatively in the next section. Here are the properties you usually use when you work with positioning:

position specifies what type of positioning you want: absolute or relative .
top specifies the offset of the top of the element.
bottom specifies the offset of the bottom of the element.
left specifies the offset of the left edge of the element.
right specifies the offset of the right edge of the element.

Here's an example where I'm setting position to absolute , and then specifying the top and left properties for two <DIV> elements, each of which contains an image:

(Listing 21-09.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Absolute Positioning With Styles          </TITLE>      </HEAD>      <BODY>          <H1>              Absolute Positioning With Styles          </H1>  <DIV STYLE="position:absolute; left:10; top:60; border-width:thick">   <IMG SRC="image1.jpg" WIDTH="216" HEIGHT="72">   </DIV>   <DIV STYLE="position:absolute; left:300; top:160; border-width:thick">   <IMG SRC="image2.jpg" WIDTH="216" HEIGHT="72">   </DIV>  </BODY>  </HTML>

You can see the results in Figure 21.4, where we've positioned the two images as we want them.

Figure 21.4. Using absolute positioning.

graphics/21fig04.gif

You can set the position of elements in code, moving them as you want, using properties such as left and top . We did that in the mouse trails example in Chapter 15, "Working with the Mouse, Keyboard, and Images," (Listing 15-10.html); here's the code that moved a trail of stars to follow the mouse:

 function draw()  {      var id      for (loopIndex = 0; loopIndex  < 6; loopIndex++) {          id = "img" + parseInt(loopIndex)          if((xData[0] == oldX) && (yData[0] == oldY)) {              timeout++          } else {              timeout = 0          }          if(timeout > 20) {              document.getElementById(id).style.visibility = "hidden"              document.getElementById(id).style.left = 0              document.getElementById(id).style.top = 2000          } else {              if((xData[loopIndex] > 0) && (yData[loopIndex] > 0)) {                  document.getElementById(id).style.visibility = "visible"  document.getElementById(id).style.left = xData[loopIndex]   document.getElementById(id).style.top = yData[loopIndex]  }          }          oldX = xData[0]          oldY = yData[0]      }  }