w3c icon + 2.0 3.0 3.2 4.0
Netscape icon 1.0 2.0 3.0 4.0  
MSIE icon 1.0 2.0 3.0 4.0  
Mosaic icon 1.0 2.0      
Opera 1.0 2.1      

<layer>

container
start tagrequired
end tagrequired

Link to Site Map

Layering is a method by which an author can put a large amount of selectable information in a compact browser window. The browser downloads the entire page but displays only "active" layers at one time. Layers can be piled up on top of each other with only one visible or they can be cumulative where each contributes to the whole effect. This page uses only the "hidden" scenario since it is most appropriate for presenting text.

Layers, on the surface, do not appear to be one of the more earth shattering innovations. Only time will tell what creative authors can do with it. I took the Netscape example and modified it to make this page. I also copied the forms element and script elements.

NB: Layer seems to preclude the use of scroll bars. The result is you will have only the usable area of your window to work with. This is going to limit the use of text in layers and be quite restrictive on the use of large graphics.

NNB: Be careful with the "clip=" attribute. You may be surprised by the result.

above=
Netscape icon 1.0 2.0 3.0 4.0  
Three parameters specify the "stacking order" of layers. They are "z-index", "above" and "below".

"If you set one of these parameters, it overrides the default behaviour of placing new layers on top of all existing layers. Only one of the three attributes can be used for any given layer.

The above= attribute specifies the layer immediately on top of a newly created layer; that is, the new layer is created just below he layer specified by the above= attribute." (Netscape)

Note: In the Netscape 4.0b1 release, only positive integers as arguments to "z-index"are supported.

"Currently all nested layers exist above their parent layer in the stacking order. The z-index="," above= and below values are relative to sibling layers, that is, other layers that have the same parent layer." (Netscape 4.0b1)

below=
Netscape icon 1.0 2.0 3.0 4.0  
Three parameters specify the "stacking order" of layers. They are "z-index", "above" and "below".

"If you set one of these parameters, it overrides the default behaviour of placing new layers on top of all existing layers. Only one of the three attributes can be used for any given layer.

The below= attribute "identifies the layer immediately beneath the newly created layer. For either attribute, the named layer must already exist. Forward references to other layers result in default layer creation behaviour (as if the above= or below= attribute had not appeared)." (Netscape)

"Currently all nested layers exist above their parent layer in the stacking order. The z-index="," above= and below values are relative to sibling layers, that is, other layers that have the same parent layer." (Netscape 4.0b1)

clip=
Netscape icon 1.0 2.0 3.0 4.0  
The clip="value,value,value,value" "parameters determine the clipping rectangle of the layer, that is, it defines the boundaries of the visible area of the layer.

The value is a set of 4 numbers, indicating in order, the left value, the top value, the right value and the bottom value. The left and right values are specified as pixels in from the left, while the top and bottom values are specified as pixels down from the origin of the layer.

Each of the 4 values are numbers of pixels. You can also specify the value as a set of 2 numbers, in which case the left and top values default to 0. For example, clip="10,20" is equivalent to clip="0,0,10,20".

The clip= attribute is optional. If the clip= attribute is omitted, the clipping rectangle of a layer is the same size as the HTML conent of the layer. Be default, a layer expands to contain all of its content." (Netscape 4.0b1)

Note: Clipping does not re-establish the wrapping of lines. In order to present the text in this "clipped" layer, I also had to decrease the width of the layer. By decreasing the width of the layer, the lines were rewritten to the size of the width= attribute. Then I included the clip= statement to "fake" the effect. Any other way and I would have "chopped" off the ends of the lines.

id=
Netscape icon 1.0 2.0 3.0 4.0  
left=
Netscape icon 1.0 2.0 3.0 4.0  
"The left= parameter specifies the absolute horizontal position of the layer for layers defined with the <layer> tag, or the relative horizontal position for layers defined with the <ilayer> tag.

The left and top parameters specify the horizontal and vertical positions of the top left corner of the layer. Both attributes are optional. The default values are the horizontal and vertical position of the tag's contents as if they were not enclosed in a <LAYER> tag.

For positioned layers the origin is the upper-left-hand corner of the document or containing layer, with coordinates increasing downwards and to the right." (Netscape)

For example: the top left corner of the window is 'left="0" top="0"'. To create a layer that starts 100 pixels from the left side of the window and 100 pixels down from the top, you would use 'left="100" top="100"'.

name=
Netscape icon 1.0 2.0 3.0 4.0  
"The NAME= parameter specifies the name of the layer so that other layers and JavaScript scripts can refer to it.

The name= parameter is an identification tag for the layer. The name must begin with an alphabetic character.

You can use the layer's name to refer to the layer from within HTML and external scripting languages such as JavaScript.

This attribute is optional; by default, layers are unnamed." (Netscape)

top=
Netscape icon 1.0 2.0 3.0 4.0  
"The top= parameter specifies the absolute vertical position of the layer for layers defined with the <layer> tag, or the relative vertical position for layers defined with the <ilayer> tag.

The left and top parameters specify the horizontal and vertical positions of the top left corner of the layer. Both attributes are optional. The default values are the horizontal and vertical position of the tag's contents as if they were not enclosed in a <LAYER> tag.

For positioned layers the origin is the upper-left-hand corner of the document or containing layer, with coordinates increasing downwards and to the right." (Netscape)

For example: the top left corner of this window is 'left="0" top="0"'. To create a layer that starts 100 pixels from the left and 100 pixels from the top, you would use 'left="100" top="100".

visibility=
Netscape icon 1.0 2.0 3.0 4.0  
"The VISIBILITY parameter determines whether the layer is visible or not. A value of HIDE hides the layer; SHOW shows the layer; INHERIT causes the layer to have the same visiblity as its parent layer. For top level layers (that is, layers that are not nested inside other layers) a value of INHERIT has the same effect as SHOW since the body document is always visible.

This attribute is optional. By default, a layer has the same visibility as its parent layer.

Remember that even if the visibility of a layer is is set to SHOW, you will only be able to see the layer if there are no other visible, solid layers stacked on top of it." (Netscape)

"show"
Netscape icon 1.0 2.0 3.0 4.0  
SHOW shows the layer
"hide"
Netscape icon 1.0 2.0 3.0 4.0  
HIDE hides the layer
"inherit"
Netscape icon 1.0 2.0 3.0 4.0  
INHERIT causes the layer to have the same visiblity as its parent layer.
width=
Netscape icon 1.0 2.0 3.0 4.0  
This parameters specifies the width of the layer's content. It controls the right margin for wrapping purposes.

The width= parameter determines how the HTML contents of the <LAYER> tag are wrapped.

If elements that cannot be wrapped, such as images, extend beyond the width specified, the actual width of the contents of the layer will be larger than the specified value. This behavior is analogous to the way in which the width of a window sets the default wrapping for any HTML it contains.

This attribute is optional; by default, the layer contents wrap at the right boundary of the enclosing block.

z-index=
Netscape icon 1.0 2.0 3.0 4.0  
Three parameters specify the "stacking order" of layers. They are "z-index", "above" and "below".

"The z-index= attribute allows a layer's "z-order" to be specified in terms of an integer. Layers with higher-numbered z-index values are stacked above those with lower ones. Positive z-index= values cause the layer to be stacked above its parent while negative values cause the layer to be stacked below its parent." (Netscape 4.0b1)

Note: In the Netscape 4.0b1 release, only positive integers as arguments to "z-index"are supported.

"Currently all nested layers exist above their parent layer in the stacking order. The z-index="," above= and below= values are relative to sibling layers, that is, other layers that have the same parent layer." (Netscape 4.0b1)