Creating Layers
Dynamically positioned objects in DHTML are often referred to as layers, probably because they work like the layers used in many graphics programs, such as Adobe Photoshop. A layer is a container for content that can be positioned in the x (horizontal), y (vertical), and z (stacking order) dimensions. A typical layer is created with a <div> tag surrounding other HTML elements, as shown in Example 29-2. Special attributes in the <div> tag define its behavior. Once you've created a layer, you can show and hide it, animate it, or change its appearance in other ways. (Note that this example simply demonstrates creating a layer, not manipulating it in any way; we'll see examples of that shortly.)
Example 29-2. Defining a Simple Layer
<html>
<head>
<style >
<!-- .welcome {
font-family: Geneva, Arial, Helvetica, san-serif; font-size: large; font-style: oblique;} -->
</style>
</head>
<body >
<div id="Layer1" (A) > (F) <p >Welcome To Jen's World!</p>
</div>
</body>
</html>
- (A)
- This line specifies an
idfor the<div>, so that we can manipulate it later with JavaScript.
- (B)
- With the
styleattribute, we specify a number of CSS properties for the<div>. First, we make the layer a positionable object by setting thepositionproperty. The possible values forpositionareabsoluteandrelative.
- (C)
- This line sets the
z-indexCSS property, which defines the stacking order of layers. While the x and y coordinates for a layer are defined in pixels,z-indexsimply assigns a number to a layer. If two layers overlap, the layer with the higherz-indexis placed on top.
- (D)
- The
leftandtopproperties define the number of pixels between the left edge of the layer and the left edge of the browser, and the top edge of the layer with the top edge of the browser, respectively.
- (E)
- This line specifies the
widthandheightin pixels for the layer.
- (F)
- Finally, we set the
background-colorproperty for the layer.
Figure 29-1 shows what Example 29-2 looks like in a browser. 