Styling Locations in Web Pages

One of the most common uses of Ajax using CSS is setting absolute positions of the elements in a Web page, as when you create pop-up menus, dialog boxes, drop-down auto-complete list boxes, and so on. Here are the CSS styles you use when setting absolute positions:

position: Set to absolute for absolute positioning.
top: Offset of the top of the element on the screen.
bottom: Offset of the bottom of the element in the browser’s client area.
left: Offset of the left edge of the element in the browser’s client area.
right: Offset of the right edge of the element in the browser’s client area.

Note

By default, the measurements of top, bottom, left, and right are taken to be in pixels. You can append px to the end of this value to make sure the browser interprets the measurement as pixels, as in 50px.

z-order: Sets the stacking order of the item with respect to other elements. Higher numbers stack to the front.

Here’s an example, absolute.html, that positions images in <div> elements:

 <html>     <head>         <title>             Absolute Positioning         </title>     </head>     <body>         <h1 align="center">             Absolute Positioning         </h1>         <div style="position:absolute; left:40; top:60;">             <img src="/books/1/252/1/html/2/image01.jpg" width=200 height=100>             <br>             Image 1         </div>         <div style="position:absolute; left:195; top:90;">             <img src="/books/1/252/1/html/2/image02.jpg" width=200 height=100>             <br>             Image 2         </div>         <div style="position:absolute; left:350; top:120;">             <img src="/books/1/252/1/html/2/image03.jpg" width=200 height=100>             <br>             Image 3         </div>     </body> </html>

You can see the results in Figure 10.11, where the images have been stacked.

image from book
Figure 10.11: Setting positions of Web page elements

In fact, you can set the stacking order of Web page elements yourself with the z-order CSS property. For example, elements given a high z-order appear on top of other elements. Here’s an example, which sets the z-order of the second image to 200 in absolute.html:

 <html>     .     .     .         <div style="position:absolute; left:40; top:60;">             <img src="/books/1/252/1/html/2/image01.jpg" width=200 height=100>             <br>             Image 1         </div>         <div style="position:absolute; left:195; top:90;             z-index:200">             <img src="/books/1/252/1/html/2/image02.jpg" width=200 height=100>             <br>             Image 2         </div>         <div style="position:absolute; left:350; top:120;">             <img src="/books/1/252/1/html/2/image03.jpg" width=200 height=100>             <br>             Image 3         </div>      </body> </html>

You can see the results in Figure 10.12. As you can see in the figure, the second image has been moved on top of the others, which is because its z-order is higher than the others.

image from book
Figure 10.12: Setting the z-order of Web page elements