    
     Home

Basic CSS Guide.
CSS Introduction.
What is CSS?
Colors & Backgrounds.
CSS Fonts.
CSS Text.
CSS Links.
CSS Classes.
CSS Floating Elements.
CSS Margining.
CSS Padding
CSS Borders.
CSS Layers.
CSS Positioning Elements.
CSS Properties.
Good CSS Design.
CSS Summary.

CSS Layers.

Back Next

CSS Tutorial will explain us now CSS Layers, it is possible to work with layers while using CSS in a website: its basically a 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 Cascading Style Sheet layers - and to top it off: the limited support it offers is quite often executed with failures in web browser.
So the real challenge when working with CSS Layers is to make them work on Netscape browsers as well as others.

Example of Cascading Style Sheet Layers

<html>
<head>
<style type="text/css">
  div.layer1 {
     background-color:lime;
     width:150px;
     height:150px;
     position:relative;
     top:10px;
     left:80px;
     z-index:2
     }

  div.layer2 {
     background-color:yellow;
     width:100px;
     height:100px;
     position:relative;
     top:-60px;
     left:35px;
     z-index:1
     }

  div.layer3 {
     background-color:orange;
     width:120px;
     height:120px;
     position:relative;
     top:-180px;
     left:175px;
     z-index:3
     }

</style>
</head>
<body>

<div class="layer1">
     Layer One<br>
     Layer One<br>
     Layer One<br>
     Layer One<br>
     Layer One<br>
</div>

<div class="layer2">
     Layer Two<br>
     Layer Two<br>
     Layer Two<br>
     Layer Two<br>
     Layer Two<br>
</div>

<div class="layer3">
     Layer Three<br>
     Layer Three<br>
     Layer Three<br>
     Layer Three<br>
     Layer Three<br>
</div>

</body>
</html>

Output of CSS Layers Example

Layer One
Layer One
Layer One
Layer One
Layer One

Layer Two
Layer Two
Layer Two
Layer Two
Layer Two

Layer Three
Layer Three
Layer Three
Layer Three
Layer Three

CSS Tutorials ends this section with these tips that to create a CSS layer all you need to do is assign the position attribute to your style. The position can be either absolute or relative for a CSS Layer.
The position itself is defined with the top and left properties for a CSS Layer.
Finally, which layer is on top is defined with the z-index attribute while using Cascading Style Sheet Layers

Back Next

[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]