Creating Layers (Web Design in a Nutshell, 2nd Edition)

29.4. 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 type="text/css">
<!--
.welcome { font-family: Geneva, Arial, Helvetica, san-serif; 
           font-size: large; 
           font-style: oblique;}
-->
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="Layer1"   (A)
     style="position:absolute;   (B)
            z-index:1;   (C)
            left:100px; top:10px;   (D)
            width:300px; height:60px;   (E)
            background-color: #FFCC00;"> (F)

<p align="center" class="welcome">Welcome To Jen's World!</p>
</div>
</body>
</html>

(A): This line specifies an id for the <div>, so that we can manipulate it later with JavaScript.

(B): With the style attribute, we specify a number of CSS properties for the <div>. First, we make the layer a positionable object by setting the position property. The possible values for position are absolute and relative.

(C): This line sets the z-index CSS property, which defines the stacking order of layers. While the x and y coordinates for a layer are defined in pixels, z-index simply assigns a number to a layer. If two layers overlap, the layer with the higher z-index is placed on top.

(D): The left and top properties 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 width and height in pixels for the layer.

(F): Finally, we set the background-color property for the layer.

Figure 29-1 shows what Example 29-2 looks like in a browser.

Figure 29-1. A simple layer