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
(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
Web Designing Related Interview Questions
|HTML Interview Questions||HTML 5 Interview Questions|
|Flash Interview Questions||Graphic Design Interview Questions|
|Illustrator Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||Dreamweaver CS3 Interview Questions|
|CSS Advanced Interview Questions||Web Developer Guide Interview Questions|
|Log Shipping Interview Questions||Spring Boot Interview Questions|
|UI Designer Interview Questions||Bootstrap 4 Interview Questions|
Web Designing Related Practice Tests
|HTML Practice Tests||HTML 5 Practice Tests|
|Flash Practice Tests||Graphic Design Practice Tests|
|Illustrator Practice Tests||Dreamweaver Practice Tests|
|UI Developer Practice Tests||Dreamweaver CS3 Practice Tests|
|Web Developer Guide Practice Tests||Advanced jQuery Practice Tests|
Web Designing Tutorial
Designing For A Variety Of Browsers
Designing For A Variety Of Displays
Web Design Principles For Print Designers
A Beginners Guide To The Server
Printing From The Web
Structural Html Tags
Adding Images And Other Page Elements
Specifying Color In Html
Cascading Style Sheets
Server Side Includes
Designing Graphics With The Web Palette
Audio On The Web
Video On The Web
Flash And Shockwave
Introduction To Smil
Introduction To Dhtml
Introduction To Xml
Wap And Wml
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.