Drag the "Floating Box" icon onto your document. Don't worry about its current position; you will precisely locate the box later on your layout grid (see TIP # 2) with the Floating Box Inspector.

You should now see the "Floating Box Inspector" (Figure 2). Name the box here. Use a meaningful name to distinguish it from others that you may use on the page. By default, the boxes are named "layer", "layer 2", etc., which is pretty confusing when you get more than a couple of boxes.

You can now specify the exact position of the box from the top left corner of the page in the areas labeled "Left" and "Top". You can also simply drag the box to its approximate location on your page and then fine tune its position with these numbers - this is what I usually do.

The "Depth" box allows you to specify the stacking order of two or more boxes that may lie over one another, or at least overlap somewhat. One is lowest in the stacking order and places a box on the bottom.

You can leave the box "Visible" by leaving the checkbox as is, or you can make it invisible by unchecking this area. For the "Sample button" I did above, I made the box invisible until you roll over the actual button, and then the "watery" animation in the box becomes visible and plays. I'll show you how to do all that in the next tutorial. You can even make your floating boxes change position and move about on your page. Roll over the button below, wait a second, and then click the button.