CSS Cascading Style Sheet: CSS Layers
Layers
With
CSS, it is possible to work with layers: pieces of HTML that are placed on top
of the regular page with pixel precision.
The advantages of this are obvious - but once
again Netscape has very limited support of CSS layers - and to top it off: the
limited support it offers is quite often executed with failures.
So the real challenge when working with layers
is to make them work on Netscape browsers as well.
LAYER BASICS
code:
LAYER 1 ON TOP:
<div style="position:relative; font-size:50px;
z-index:2;">LAYER 1</div>
<div style="position:relative; top:-50; left:5; color:red; font-size:80px;
z-index:1">LAYER 2</div>
LAYER 2 ON TOP:
<div style="position:relative; font-size:50px;
z-index:3;">LAYER 1</div>
<div style="position:relative; top:-50; left:5; color:red; font-size:80px;
z-index:4">LAYER 2</div>
___________________________
To create a layer all you need to do is assign
the position attribute to
your style. The position can be either
absolute or relative.
The position itself is defined with the
top and
left properties.
Finally, which layer is on top is defined with
the z-index attribute.
RELATIVE VERSUS ABSOLUTE
POSITIONING
You can either position your layer calculated
from the upper left corner(absolute) or calculated from the position where the
layer itself is inserted (relative).
position:absolute
If you define the position to be absolute it will be calculated from the
upper left corner of the page - unless the layer is defined inside another
layer, in which case it will be calculated from the upper left corner of the
parent layer.
position:relative
If you define the position to be relative it will be relative to the
position of the tag that carries the style.
That is, if you add a relatively positioned layer in the middle of the page,
then the position will be calculated from that exact spot in the middle of your
page where it was added.
DEFINING THE POSITION
While the
position property indicates the out spring of
our coordinate system, the left
and top properties defines
the exact position of our layer.
You can enter both positive and negative values
for these properties - thus it is possible to place content higher up and
further to the left on the page than the logical position in the HTML code where
the layer itself is defined.
In other words: at the bottom of your HTML code
you can enter the code for a layer that is positioned at the top of the
resulting page.
Both
left and top
properties can be dynamically changed
with JavaScript.
This means that it is possible to move things
around on the screen even after the page has finished loading.
In fact this technique can be (and has been)
used to create entire games. Other uses might be menus that pop out when a
mouse-over is detected on a link. The possibilities are endless - but in order
to keep things simple, we will not dig into details about these dynamic HTML
effects .
POSITION IN THE STACK -
THE Z-INDEX
Picture a game of 52 cards. If the ace of spades
was at the bottom we'd say it had
z-index:1;. If the queen of hearts was at the top we'd say she had
z-index:52;.
Try looking at the code example at the top of
this page again, and see how we used the z-index to put LAYER 1 on top in the
first example, while we had LAYER 2 on top in the second example.
Very interesting possibilities arise from the
fact that the z-index can be dynamically changed with JavaScript.
You could create several "pages" on top of each
other - all on the same page. When the user clicks a link it will simply move
the layer with the desired info on top rather than load a new page. The
techniques to create effects like that goes beyond the scope of pure CSS
however, so for now we will just refer to DHTML (Dynamic HTML - a mix between
JavaScript and CSS) for further explorations into that area.
VISIBLE VERSUS HIDDEN
LAYERS
A final property is the
visibility property that will allow you to
create invisible layers.
Why would anyone want to create an invisible
layer? Well, imagine the possibilities it gives for adding pop-up menus and
other cool effects on your pages.
With dynamic HTML it is possible to change the
visibility of a layer according to certain events. The most common use of this
is to create menus that pop out (like the sub menus in the START menu on
Windows). The trick behind these menus is to create all submenus as invisible
layers. Then, when a mouse-over is detected on a link the according layer
becomes visible. (Sounds pretty easy - actually is pretty easy - except when
tried on Netscape browsers that seem to have only a vague idea of the logic
behind CSS layers).
Valid values for the
visibility property are:
visible and
hidden.
This example shows how to create an invisible
layer:
![Text Box: <div style=]() HELLO!!!
" src="http://schsup.622mb.com/seo/Layers_files/image001.gif" />
PRACTICAL USE OF LAYERS
It's obvious that layers offer certain
possibilities for precise positioning of static elements on your pages.
In reality layers are often used in more dynamic
ways:
* Flying elements/banners on the page
* Games where you move an object around
* Menus that pop out when triggered
* Menus that become visible when triggered
While all of these effects might seem pretty cool and useful - the fact is that
the web is filled with dynamic effects that are much more cool than the average
visitor really likes.
The more you create a unique interface for your site the more you force the
visitor to forget about what she is used to. Do not underestimate the power of
sticking to the elements that the average visitor is accustomed to.
What's cool about creating an effect that makes 90% of all web designers clap
their hands while leaving 90% of non-web designers confused or disappointed?
In any case, judge for yourself if a certain effect is really needed - and if
so: do not hesitate to use it.
|