Layer

End Tag: Required
Support Key: 2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
What is it?
Attributes
Tag Example
Parent/Content Model
Tips & Tricks
Browser Peculiarities
= Index DOT Html by Brian Wilson [bloo@blooberry.com] =
Main Index | Element Tree | Element Index | HTML Support History


What is it?
This is a new element created by Netscape that allows an author to define precisely positioned 2-dimensional layout consisting of overlapping layers of transparent or solid content on a web page. All the content between the opening and closing LAYER tags can be treated as a single item of content that can be moved and altered in various ways.

Layers can have a stacking order that allows a virtual third z-dimension to be defined. Using this, layers can appear on top of other layers. Layers can also be transparent or solid; if transparent, the content of underlying layers shows through it. As if that wasn't enough, background colors or tiled images can also be specified for a layer (setting these attributes for a layer will negate the its transparency property and layers below it will be obscured.)

Layers can be nested and moved in a dynamic fashion via scripting. This type of layer defining explicit positioning is also known as an 'out-of-flow' or 'positioned' layer. An alternate method of defining a layer is through the use of the ILAYER element, which allows the definition of layers whose position follows the flow of the page [like an image] - this is known as an 'inflow layer'.

Common Attributes
%Core%
2 | 3 | 3.2 | 4 | IE | M | N4B2 | O

Specific Attributes
Above
2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
Required? No
Description:
This attribute specifies the name of the layer that will occur directly above the current layer in the layer stacking order (z-order.) It overrides the default behavior of placing new layers on top of all existing layers. Only one of the Z-INDEX, ABOVE, or BELOW attributes can be used for a given layer. References to layers not yet defined result in default layer creation behavior - i.e. the new layer will be placed on top of all existing layers.
Values: An existing valid alphanumeric layer NAME value.
Background
2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
Required? No
Description:
This specifies a background image to be tiled on a layer. Default behavior for a layer is to be transparent.
Values: An absolute or relative URL.
Below
2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
Required? No
Description:
This attribute specifies the name of the layer that will occur directly below the current layer in the layer stacking order (z-order.) It overrides the default behavior of placing new layers on top of all existing layers. Only one of the Z-INDEX, ABOVE, or BELOW attributes can be used for a given layer. References to layers not yet defined result in default layer creation behavior - i.e. the new layer will be placed on top of all existing layers.
Values: An existing valid alphanumeric layer NAME value.
Bgcolor
2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
Required? No
Description:
This specifies the background color of the layer. Default behavior for a layer is to be transparent.
Values: An RGB triplet or a special Color name.
Clip
2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
Required? No
Description:
This parameter specifies the clipping rectangle (viewable area) of the layer, which can be less than the width and height of the content of the layer. If the CLIP attribute is omitted, the clipping rectangle of a layer is the same size as the HTML content of the layer. A layer will expand to contain all of its content by default.
Values:
A comma separated list of integer values representing the absolute pixel coordinates of the rectangle. Origin values are at the top, left corner and grow as one moves down or to the right.
   Format 1: CLIP="left,top,right,bottom"
   Format 2: CLIP="right,bottom" ['left' and 'top' values default to zero.]
Height
2 | 3 | 3.2 | 4 | IE | M | N4B3 | O
Required? No
Description:
This parameters specifies the height of the layer's content and serves as a reference dimension for child layers.
Values: Positive integers representing a pixel width or a percentage relative to the containing layer/window.
Left
2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
Required? No
Description:
This specifies the coordinate position of the left side boundary position of the current layer in relation to a parent layer if present. if no parent layer exists, the value is relative to the main document window.
Values:
Integer values specifying screen position or an HTML scripting expression to position one layer relative to another.
Name
2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
Required? No
Description:
This attribute specifies the name of the layer in order to identify or reference it from other layers or scripting languages. Layers are unnamed by default.
Values: An alphanumeric string. Must begin with an alphabetic character.
PageX
2 | 3 | 3.2 | 4 | IE | M | N4B3 | O
Required? No
Description:
This specifies the absolute horizontal (X) coordinate position of the left boundary position of the current layer in relation to the document window (this differs slightly in definition from the LEFT attribute.)
Values: Integer values specifying screen position or an HTML scripting expression.
PageY
2 | 3 | 3.2 | 4 | IE | M | N4B3 | O
Required? No
Description:
This specifies the absolute vertical (Y) coordinate position of the top boundary position of the current layer in relation to the document window (this differs slightly in definition from the TOP attribute.)
Values: Integer values specifying screen position or an HTML scripting expression.
Src
2 | 3 | 3.2 | 4 | IE | M | N4B3 | O
Required? No
Description:
This attribute specifies the URL of an HTML 'sub-document' to be inserted in to the layer. The effect is similar to the IFRAME tag implemented by Internet Explorer.
Values: Either an absolute or relative URL.
Top
2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
Required? No
Description:
This specifies the coordinate position of the top boundary position of the current layer in relation to a parent layer if present. if no parent layer exists, the value is relative to the main document window.
Values:
Integer values specifying screen position or an HTML scripting expression to position one layer relative to another.
Visibility
2 | 3 | 3.2 | 4 | IE | M | N4B2 | O
Required? No
Description:
This attribute specifies whether the layer is visible or not. A layer will have the same visibility as its parent layer by default. Even if the visibility of a layer is set to SHOW, a layer can only be seen if there are no other visible, solid layers stacked on top of it. For top level 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.
Values:
    show [Shows the layer]
    hide [Hides the layer]
    inherit [The layer will have the same visibility as its parent layer]
Width
2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
Required? No
Description:
This parameters specifies the width of the layer's content. Specifically, it controls the right margin of the layer for wrapping purposes. Some elements may not be 'wrappable' (like images) and extend beyond the width specified. Layer contents wrap at the right boundary of the enclosing block by default.
Values: Positive integers representing a pixel width.
Z-index
2 | 3 | 3.2 | 4 | IE | M | N4B1 | O
Required? No
Description:
This attribute allows a layer's stacking order (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 will cause the layer to be stacked below its parent. This attribute overrides the default behavior of placing new layers on top of all existing layers. Only one of the Z-INDEX, ABOVE, or BELOW attributes can be used for any given layer.
Values: Positive integers (zero inclusive.)
Example
<layer NAME="two" LEFT=40 TOP=40 Z-INDEX=2><font SIZE=7 COLOR="#0000ff">Two</font> </layer>
<layer NAME="one" LEFT=25 TOP=25 Z-INDEX=1><font SIZE=7 COLOR="#ffff00">One</font> </layer>
<layer NAME="three" LEFT=55 TOP=55 Z-INDEX=3><font SIZE=7 COLOR="#ff0000">Three</font> </layer>
Parent Model
%Block Parent%
Content Model
%In-line Content% | %Block Content%
Tips & Tricks Browser Peculiarities
Boring Copyright Stuff...