How to Put a Transparent DIV on Top of a DIV

The CSS "absolute" property lets you programmatically assign a location for your div containers. You can layer your div containers and place one on top of the other. A transparent div on top of another div displays only the div on the bottom, because the top div has no solid color. Using a transparent div lets you dynamically hide and show content within your bottom div.

Instructions

1. Right-click the HTML file you want to edit. Click "Open With," then click your HTML editor program in the list of shortcuts.

2. Create the bottom div. The following code shows you how to make a div that sits in the top-left corner of the user's browser:

   <div id="bottomdiv" style="position: absolute; left: 20px; top: 20px"> My bottom content </div>

3. Create the transparent div and place it in the same location as the "bottomdiv" created in Step 2:

   <div id="topdiv" style="position: absolute; left: 20px; top: 20px; filter:alpha(opacity=0)"> My top content </div>

   The "opacity" style set to "0" creates a transparent div.

References

• W3 Schools: CSS position Property
• W3 Schools: CSS Image Opacity / Transparency