Overlapping Boxes

Several CSS techniques that are useful for overlapping boxes.

Parchment Effect

You can use a parchment effect with the following CSS code:

/* Set the opacity of the layer */
filter:       alpha(opacity=90); /* IE 5.5 and higher*/
-moz-opacity: .90;               /* Mozilla 1.5 and higher */
opacity:      .90;               /* Mozilla 1.7 & FireFox */

By including all three you cover most of the popular browsers although with IE the user may have to unblock the content before being able to see the effect.

Readability should be the key factor here. Opacities less than 80% will make most text unreadable against most photos. Less opacity is better in this case.

3-D Layering

You can tell the browser which block should be closest to the user by using the z-index. The higher the number the closer the block will be to the user.

For example, use 0 to put the graphic below the content block:
The graphic id has a z-index: 0;
The content id has a z-index: 5;

(You could use 0 and 1, but when there are multiple layers it is nice to have some "breathing" room to insert other layers in between.)

Here is the code for the graphic:

#graphic {
   position: absolute;
   border:   3px solid #00FF00; /* dark green */
   left:     0px;
   top:      0px;
   width:    100%;
   z-index:  0; /* higher numbers are closer to user */
}

Absolute Positioning

Blocks can be positioned using position: absolute;

When absolute positioning is used the block is separate from the regular flow of the page.

In order to work with all browsers you have to use separate entries for margin-left: and margin-right:

Here's the complete code listing for this block

#content {
width:            90%;
background-color: #E1E2FB; /* light blue */
border:           3px solid #000099; /* dark blue */
/* Set the opacity of the layer */
filter:           alpha(opacity=90); /* IE 5.5 or higher */
-moz-opacity:     .90; /* Mozilla 1.5 or higher */
opacity:          .90; /* Mozilla 1.7 & FireFox */
padding:          5px;
/* position the text box using percentage of window */
position:         absolute;
margin-left:      5%;
margin-right:     5%;
margin-top:       7%;
z-index:          5; /* higher numbers closer to user */
}