Greytower Technologies

If the navigation is not visible, this link will take you to it.

 

The Z Files

or layering elements with CSS

by Tina Holmboe, Greytower Technologies

Abstract

This document attempts to - in as friendly and straight-forward manner as possible - describe what layers are, how they are defined in terms of CSS, and how to use them for website construction.

Prerequisites

It is assumed a working knowledge of HTML and CSS level 2.

Introduction

The very first thing to get a handle on is what exactly constitutes a layer. Try to put in your mind this image: you are looking out through your window, and you see in the distance a mountain-range. At the foot of the range is a lake, and between you and the lake is a small village.

With this image in mind you might agree that the village is closest to you, whilst the mountains are the farthest away. Now draw - in your mind or on paper - what you see: the mountains, the lake, and the village. Put the sheets of paper in a pile, with the mountain at the bottom, then the drawing of the lake, and finally the village. (Plastic foils meant for overhead machines can be useful at this point.)

What you now have before you is a stack (of papers), where each sheet of paper represent one layer. The village is on the top, the lake in the middle, and the mountain on the bottom.

There are quite a few uses for this way of thinking, among other things in graphical design work, creating cartoons, the baking of cakes, and building transparent and animated GIFs.

A practical example

One of the most commonly seen, but perhaps not always recognised, uses for this kind of layering on the Web comes in the form of animated GIF images.

The GIF format allows for storage of layers, each layer being rendered by a supporting web-browser as one frame in an animation. As an example, observe the following six frames:

Eye #1 Eye #2 Eye #3
Eye #4 Eye #5 Eye #6

which form part of this animated GIF. In the GIF file each image is stored separately. An image viewer with the ability to handle animations will separate these images, and display each layer (frame) in turn with a number of seconds between them.

Since each frame - or layer - is different from the previous frame, human eyes will perceive the resulting set of moving images as an animation.

Layers the CSS Way

In CSS each sheet of paper - or each frame in the above animated GIF - would be referred to as a box. Each box has three (3) positions - in the X (or horizontal) axis, the Y (or vertical) axis, and Z (or depth) axis. These three, often called a box' dimensions will be covered in detail a little later.

Any HTML - or even XML - elements can theoretically be layered with CSS 1, allthought not all browsers support it. In most cases you probably want to use the DIV element to create a separate container for other elements, and layer the result. Let us start with looking at the DIV-element.

The DIV Element

The DIV element is a so-called generic block-level container. This means that it is used for encapsulating other HTML elements, and that it has no specific logical or presentational 2 properties of its own, making it particularly useful for CSS.

Any HTML tag - including <div> - meant for use in <body> can be contained inside a <div>, and stylesheets can be applied through the class, id and style attributes. 

    <div class="myStyles">
     <h2>My Little Table</h2>
     <table>
      <tr>
       <td>Minimal, one-cell, table</td>
      </tr>
     </table>
    </div>

By using <div>, you can easily group other tags into logical units which can be styled and manipulated as a whole - something which brings us to the next part: identifying such logical units.

The ID Attribute

Like all other HTML 3 tags, <div> has an attribute named id, used to specify a document-wide unique identification string. The value of this id should not be repeated throughout the document, as it in such a case becomes impossible to identify specific elements in the document tree.

When a tag has been identified in this manner, it becomes easy to style the tag, as well as manipulate it using script languages. 

    <div class="myStyles"
          id="myFirstLayer">
     <table>
      <tr>
       <td>Minimal, one-cell, table</td>
      </tr>
     </table>
    </div>

This example extends our little <div>/<table> with the class attribute - applying a set of CSS rules - as well as giving it the unique identification string myFirstLayer

Bear in mind that the id string must start with a letter (that is one of the characters a-z in either upper or lower case), and can thereafter consist of the letters a-z (again in lower or upper case), the digits 0-9, as well as the underscore (_), hyphen (-), colon (:) and period (.) characters.

Positioning - the X and Y axis

Grouping tags into logical, uniquely identified, units is often only the first step - and quite often it is positioning the unit that interests people. This is easily achieved with CSS, though that topic is an extensive one and I leave a full examination to the chapter on Visual formatting model as referenced below.

We will deal with the simplest form of horizontal and verical positioning as an example only. Note that this document also neglects to dwelve into the topic of accessibility issues when using fixed sizes for positioning.

Under normal circumstances an element is rendered on a page relative to other elements surrounding it. Our now complete example 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                         "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>
   Test page
  </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>

 <body>
  <p>
   This is a small test paragraph
  </p>

  <div class="myStyles"
       id="myFirstLayer">
   <table border="1">
    <tr>
     <td>Minimal, one-cell, table</td>
    </tr>
   </table>
  </div>
 </body>
</html>

might be rendered as in the following screenshot. Example #1. This form of rendering is know as 'static' positioning, and is the default way CSS browsers render elements. As you can see, the P is rendered first with it's default amount of whitespace, followed by the TABLE.

However, it is possible to alter the way elements are rendered. The following example shows how the TABLE element is positioned using the 'absolute' scheme, and rendered in the upper right hand corned of the viewport. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                         "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>
   Test page
  </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <style type="text/css">
   DIV#myFirstLayer {
    position : absolute ;
   }
  </style>
 </head>

 <body>
  <p>
   This is a small test paragraph
  </p>

  <div class="myStyles"
       id="myFirstLayer">
   <table border="1">
    <tr>
     <td>Minimal, one-cell, table</td>
    </tr>
   </table>
  </div>
 </body>
</html>

Example #2 This code will - in a browser supporting CSS - remove the element from the normal flow of rendering, and position it according to values specified by the properties top, bottom, right, and left.

In this manner, the author can place elements more or less exactly where he or she wish on a website 4.

Positioning - the Z

Now that you've positioned your <div> along the X and Y axis, it is time to think about Z - and the very idea behind this document. So far we have gone through basic concepts, and illustrating them with a small example where we have positioned a <div>.

Let us review our example, but with the added difference that we now position the example paragraph in the same position as the <div>, as well as add background coloring to make it more visible. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                         "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>
   Test page
  </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <style type="text/css">
   P#myFirstParagraph {
    position         : absolute ;
    top              : 5px ;
    right            : 5px ;
    background-color : #00FF00 ;
   }


   DIV#myFirstLayer {
    position         : absolute ;
    top              : 10px ;
    right            : 10px ;
    background-color : #0000FF ;
   }
  </style>
 </head>

 <body>
  <p id="myFirstParagraph">
   This is a small test paragraph
  </p>

  <div class="myStyles"
       id="myFirstLayer">
   <table border="1">
    <tr>
     <td>Minimal, one-cell, table</td>
    </tr>
   </table>
  </div>
 </body>
</html>

Example #3 As you could perhaps guess, this has the predictable result of making the paragraph rather hard to read as it now ends up underneath the <div> containing the table.

Think back to the very first part of this document, and compare what you see to the description there. The paragraph has ended up underneath the <div>; the <div> is above the paragraph.

What we need to do now is adjust the depth position of the paragraph, so that it is rendered above the <div>. This situation calls for use of the CSS property z-index, which controls the stack level of a positioned element. In other words, it allow you to take a sheet of paper out of the pile, and insert it somewhere else. This final example illustrate the use: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                         "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>
   Test page
  </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <style type="text/css">
   P#myFirstParagraph {
    z-index          : 1 ;
    position         : absolute ;
    top              : 5px ;
    right            : 5px ;
    background-color : #00FF00 ;
   }


   DIV#myFirstLayer {
    position         : absolute ;
    top              : 10px ;
    right            : 10px ;
    background-color : #0000FF ;
   }
  </style>
 </head>

 <body>
  <p id="myFirstParagraph">
   This is a small test paragraph
  </p>

  <div class="myStyles"
       id="myFirstLayer">
   <table border="1">
    <tr>
     <td>Minimal, one-cell, table</td>
    </tr>
   </table>
  </div>
 </body>
</html>

Example #4 As you can see, the paragraph is now raised above the <div>. The default value is 0, which means that all elements are at the same level when rendered, and only their internal order define which end up on top of which.

By setting the paragraph's stack level to 1, the browser will render the paragraph one level up from the <div>, and subsequently closer to the viewer.

In effect this means that the higher the z-index, the closer to the viewer the element will appear to be.

References

W3C Box model
W3C CSS Level 2 Specification May 12th 1998
Available from http://www.w3.org/TR/REC-CSS2/box.html
Liam Quinn DIV - Generic Block-Level Container
WDG HTML 4.0 Reference May 11th 2001
Available from http://www.htmlhelp.com/reference/html40/block/div.html
W3C Grouping elements: the DIV and SPAN elements
W3C HTML 4.01 Specification December 24th 1999
Available from http://www.w3.org/TR/html4/struct/global.html#edef-DIV
W3C Visual formatting model
W3C CSS Level 2 Specification May 12th 1998
Available from http://www.w3.org/TR/REC-CSS2/visuren.html
W3C Layered presentation
W3C CSS Level 2 Specification May 12th 1998
Available from http://www.w3.org/TR/REC-CSS2/visuren.html#q30

Notes

1
When the author claims that 'any HTML element can be layered', it is to be understood that elements such as BR falls into the silly thing to consider layering cathegory :)

2
Since the DIV element is block-level, it is typically rendered with whitespace before and after.

3
The id attribute used in HTML may, or may not, be present in languages created with XML. It is present in XHTML, but other languages may have chosen other options. Even so, it would be logical that even such languages have some means of uniquely identifying parts of the document tree.

4
It must be noted that such absolute positioning in many cases do great harm to accessibility of web-pages. It is worth looking into this topic in greater detail before using the technique.

Return to the top of the document