Layers Part 1 Basic Implementation

Published on 2001-08-03 by John Collins. Socials: YouTube - X - Spotify - Amazon Music - Apple Podcast

Introducing Layers

Layers form the bedrock of all page layout and dynamic techniques in modern web design, and are a great place to start your foray into the murky waters of DHTML. You will find as you progress through this series of articles on layers that almost every element of your site; text, graphics, animations, will be contained within a layer. Many web designers still advocate the use of the table tag to position elements on the screen, but this method is not as precise as layers and it is not recommended by the World Wide Web Consortium.

It should be pointed out at this stage that the term "layer" does not apply to the older Netscape layer tag which has now depreciated and is no longer supported by Netscape itself. Normally the div or span tags are used for layers, therefore they are often referred to as "div-blocks' or "div-layers", but for the purpose of simplicity I will simply call them "layers".

Setting up a Layer

You may include the CSS attributes for your layer in the head of your HTML document, in an external .css file or inline within the div tag itself:

Example in the document head:

<html>
<head>
 
<style type="text/css">
#MyLayer { style attributes go here }
</style>
</head>
<body>
 
<div id="MyLayer">Layer's contents go here, images, text etc.</div>
 
</body>
</html>

Inline example:

<div style=" style attributes go here ">Layer's contents go here.</div>

In the document head example I assign the "MyLayer" id to the layer so that it may be accessed for further manipulation at a later date by using the DOM and JavaScript. This is the preferred option for this reason, the inline example provides less flexibility and should only be used sparingly.

Layer Attributes and Syntax

Here is a list of most of the attributes associated with the appearance of a layer:

Position: absolute or relative. Absolute positioning will place the layer exactly where specified, while relative will place the layer in relation to its original position in the natural flow of the document.
Top: The position of the layer from the top of the display area measured in pixels.
Left: The position of the layer from the left margin, measured in pixels.
Width The width of the layer in pixels.
Height: The height of the layer in pixels.
Clip: The shape and the size of the clipping plane of the layer (how much it is cropped). Currently only the rectangle is supported, but it is hoped that other shapes will be introduced in the future.
Background-color: Notice the word 'color' is spelled the American way with no letter u. This may be set as a hexadecimal: #ffffff; RGB: rgb(000,000,000); or worded format, such as the colour's name or 'none' for a transparent layer background.
Visibility: hidden or visible, self-explanatory.
Overflow: When clipping a layer, this sets what happens to the layer content that is not displayed; i.e. that which is outside the clipping plane. The values are hidden, visible, auto (browser decides what to do), or scroll (scroll bars are assigned to the layer).
Z-index: Defines the 3D stacking order of the layer, the higher the number the closer the layer will be to the foreground.

Syntax:

<style type="text/css">
#MyLayer { position:absolute; left:0px; top:0px; width:0px; height:0px; 
clip:rect(0px,0px,0px,0px); background-color:none; visibility:hidden; 
overflow: hidden; z-index:0;}
</style>

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2001, but is left here for archival purposes.