Object Layers

Modified

Permalink to this page.

This tutorial will show you how to create layers between two objects.

You have two texts you want to layer Text 1 & Text 2.

First, decide which text you want on top and which one underneath. Then, in your style sheet, you need to add this code:

.test2 {
      z-index: #
}

The z-index requires a number. By default, the index of every object is 0. So if you want an object behind another, you set the z-index to -1. If you want the object, on top, you set it to 1. You can use higher numbers if you want to create many layers as well.

However, you need to give the second element a position, or else the objects will not overlap. Let’s say for the sake of this tutorial, the CSS code is:

.test2 {
      z-index: 1;
      position: relative;
      top: -15px;
      left: -20px;
}

Then your texts will look like so:

So here’s the code for the example above:

<style type=”text/css”>
.test1 {
     font-size:16pt;
     font-weight:bold;
     color:#000000;
}

.test2 {
     z-index: 1;
     position: relative;
     top: -15px;
     left: -20px;
     color:#FFFFFF;
     font-size:12pt;
     font-weight:bold;
}
</style>

<font class=”test1″>Text 1</font>
<br /><font class=”test2″>Text 2</font>

If you have any questions, contact me and I’ll reply ASAP!

« back