Imagine a hypothetical stack of transparent cellophane sheets. On each sheet you can place any HTML elements you choose. You can color the sheet itself, fill it with a background image, or leave it transparent. Once done, you arrange all of your cellophane sheets in any configuration you like. The result is a single page made up of several layers .
Layers can even move and rearrange themselves, right in front of the user's eyes.
Creating this sort of precise positioning with layers is simple, as shown in Example 2. Also keep in mind that the layer is positioned at 230 pixels from the left margin and 25 pixels down from the top margin. The z-index attribute determines overlap order and must contain a positive integer. So, we chose a z-index value of 2 for the first layer . This allows us to place many layers above it, one layer below it, or both.