Creating layers Web Designing

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. 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: Defining a Simple Layer

(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 shows what Example looks like in a browser.

Figure: A simple layer

A simple layer


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Web Designing Topics