The name attribute

If you plan on creating a layer and never referring to it, you needn’t give it a name. However, if you plan to stack other layers relative to the current layer, as we demonstrate later in this chapter, or modify your layer using JavaScript, you’ll need to name your layers using the name attribute. The value you give name is a text string, whose first character must be a letter, not a number or symbol.

Once named, you can refer to the layer elsewhere in the document, and change it while the user interacts with your page. For example, this bit of HTML:

<layer name="warning" visibility=hide>
Warning!  Your input parameters were not valid!
</layer>

creates a layer named warning that is initially hidden. If in the course of validating a form using a JavaScript routine, you find an error and want to display the warning, you would use the command:

warning.visibility = show;

Netscape then makes the layer visible to the user.

The left and top attributes

Without attributes, a layer gets placed in the document window as if it were part of the normal document flow. Layers at the very beginning of a document get put at the top of the Netscape window; layers that are between conventional document content get placed in line with that content.

The power of layers, however, is that you can place them anywhere in the document. Use the top and left attributes for the <layer> tag to specify its absolute position in the document display.

Both attributes accept an integer value equal to the number of pixels offset from the top left (0,0) edge of the document’s display space or, if nested inside another layer, the containing layer’s display space. As with other document elements whose size or position extends past the edge of the browser’s window, Netscape gives the user scrollbars so that they can access layered elements outside the current viewing area.

Here is a simple layer example that staggers three words diagonally down the display–not something you can do easily, and certainly not with the same precision, in conventional HTML:

<layer left=10 top=10>
  Upper left!
</layer>
<layer left=50 top=50>
  Middle!
</layer>
<layer left=90 top=90>
  Lower right!
</layer>

The result is shown in Figure 6.8.

Admittedly, this example is a bit dull. Here’s a better one that creates a drop shadow behind a heading:

<layer>
  <layer left=2 top=2>
    <h1><font color=gray>Introduction to Kumquat Lore</font></h1>
  </layer>
  <layer left=0 top=0>
    <h1>Introduction to Kumquat Lore</h1>
  </layer>
</layer>
<h1> </h1>
Early in the history of man, the kumquat
played a vital role in the formation of
religious beliefs.  Central to annual harvest
celebrations was the day upon which kumquats
ripened.  Likened to the sun (<i>sol</i>), the
golden fruit was taken (<i>stisus</i>) from the
trees on the day the sun stood highest in the
sky.  We carry this day forward even today,
as our summer <i>solstice</i>.

Figure 6.9 shows the result.

We used a few tricks to create the drop shadow effect for the example header. First, Netscape covers layers created earlier in the document by later layers. Hence, we create the gray shadow first, followed by the actual heading, so that it appears on top, above the shadow. We also enclosed these two layers in a separate containing layer. This way, the shadow and header positions are relative to the containing layer, not the document itself. The containing layer, lacking an explicit position, gets placed into the document flow as if it were normal content and winds up where a conventional heading would appear in the document.

Normal document content, however, still starts at the top of the document, and would end up behind the fancy heading. To push it below the layered heading, we include an empty heading (save for a nonbreaking space– ) before including our conventional document text.

This is important enough to repeat: normal document content following a <layer> tag is positioned directly under the layer it follows. This effect can be circumvented using an inline layer.

The above, below, and z-index attributes

Layers exist in three dimensions, occupying space on the page and stacked atop one another and the conventional document content. As we mentioned above, layers normally get stacked in order of their appearance in the document–layers at the beginning get covered by later layers in the same display area.

You can control the stacking order of the layers with the above, below, and z-index attributes for the <layer> tag. These attributes are mutually exclusive; use only one per layer.

The value for the above or below attribute is the name of another layer in the current document. Of course, that referenced layer must have a name attribute whose value is the same name you use with the above or below attribute in the referring <layer> tag. You also must have created the referenced layer earlier in the document; you cannot refer to a layer that comes later in your document.

In direct contradiction with what you might expect, Netscape puts the current layer below the above named layer, and above the below named layer.[2] Oh, well. Note that the layers must occupy the same display space for you to see any effects.

[2] One cannot help but wonder if the above and below attributes were implemented in the wee hours of the morning.

Let’s use our drop shadow layer example again to illustrate the above attribute:

<layer>
  <layer name=text left=0 top=0>
    <h1>Introduction to Kumquat Lore</h1>
  </layer>
  <layer name=shadow above=text left=2 top=2>
    <h1><font color=gray>Introduction to Kumquat Lore</font></h1>
  </layer>
</layer>

The above attribute in the layer named shadow tells Netscape to position the shadow layer so that the layer named text is above it.

The above and below attributes can get confusing when you stack several layers. We find it somewhat easier to use the z-index attribute for keeping track of which layers go over which. With z-index, you specify the order in which Netscape stacks the layers: higher z-index value layers get put on top of lower z-index value layers.

For example, to create our drop shadow using the z-index attribute:

<layer>
  <layer left=0 top=0 z-index=2>
    <h1>Introduction to Kumquat Lore</h1>
  </layer>
  <layer left=2 top=2 z-index=1>
    <h1><font color=gray>Introduction to Kumquat Lore</font></h1>
  </layer>
</layer>

Normally, Netscape would display the second layer–the gray one in this case–on top of the first layer. But since we’ve given the gray layer a lower z-index value, it is placed behind the first layer.

The z-index values need not be sequential, although they must be integers, so we could’ve used the values 99 and 2, respectively, and gotten the same result in the previous example. And you need not specify a z-index for all the layers that occupy the same display space–only those you want to raise or lower in relation to other layers. However, be aware that the order of precedence may get confusing if you don’t z-index all related layers.

For instance, what order of precedence by color would you predict when Netscape renders the following sequence of layers?

<layer left=0 top=0 z-index=3>
  <h1><font color=red>Introduction to Kumquat Lore</font></h1>
</layer>
<layer left=4 top=4>
  <h1><font color=green>Introduction to Kumquat Lore</font></h1>
</layer>
<layer left=8 top=8 z-index=2>
  <h1><font color=blue>Introduction to Kumquat Lore</font></h1>
</layer>

Give yourself a star if you said that the green header goes on top of the red header which goes on top of the blue header. Why? Because the red header is of lower priority than the green header based on order of appearance, and we forced the blue layer below the red one by giving it a lower z-index value. Netscape displays z-indexed layers according to their given order and non-z-indexed layers according to their order of appearance in the document. Precedence based on order of appearance also applies for layers that have the same z-index value. If you nest layers, all the layers at the same nesting level get ordered according to their z-index attributes. This group is then ordered as a single layer among all the layers at the containing level. In short, layers nested within a layer cannot be interleaved among layers at a different level.

For example, consider these nested layers, with their content and end tags omitted for clarity (indentation indicates nest level):

<layer name=a z-index=20>
  <layer name=a1 z-index=5>
  <layer name=a2 z-index=15>
<layer name=b z-index=30>
  <layer name=b1 z-index=10>
  <layer name=b2 z-index=25>
  <layer name=b3 z-index=20>
<layer name=c z-index=10>

Layers a, b, and c are at the same level, with layers a1 and a2 nested with a, and b1, b2, and b3 nested within b. Although the z-index numbers might at first glance appear to cause Netscape to interleave the various nested layers, the actual ordering of the layers, from bottom to top, is c, a, a1, a2, b, b1, b3, and b2.

If two layers are nested within the same layer and have the same z-index value, the layer defined later in the document is placed on top of the previously defined layer.[3]

[3] This, of course, applies to layers inside the same containing nest only.