How to Code a DIV Overlay


Cascading Style Sheet, or CSS, overlays give you the ability to position objects over other objects on a Web page. DIV elements -- which contain other HTML elements -- are ideal candidates for CSS positioning. Use overlays to highlight important items on a Web page. You can also create overlays that cause text or graphic images to appear anywhere you like as your Web application runs. The CSS "absolute" positioning property makes the overlay process possible.

  • Open one of your Web page documents using an HTML editor or Notepad. Choose a document that contains several elements such as images, paragraphs or headings. These will serve as the backdrop for the DIV overlay you will create.

  • Locate the document's "<body>" section and paste the following HTML code into that section:

    <div id="div1" class="divOverlay">

    This is an Overlay Div -->


    <input type="button" value="Click to Overlay onclick="return ShowOverlay('div1', 100, 200)" /></p>

    This creates a DIV with an ID of "div1" -- it references a CSS class named "divOverlay." The button below the DIV calls the "ShowOverlay" JavaScript function -- it passes the DIV's ID to the function, and also passes the desired "x" and "y" coordinates of where you would like the DIV to appear on the Web page. In this example, the "x" coordinate's value is "100" and the "y" coordinate's value is "200."

  • Add this CSS code to the document's "<head>" section:

    <style type="text/css">

    .divOverlay {top:0px; left:0px; position:absolute; visibility:hidden; z-index:500;}


    This creates the "divOverlay" CSS class described previously. The top and left values position the overlay zero pixels from the top of the Web page and zero pixels from the left. The position property's "absolute" value allows browsers to move any element that references the class. The z-index property determines how a browser "stacks" an element. A page element with a low z-index value, such as "3," will appear behind an element with a higher z-index value. By using a very large value -- "500" in this example -- you ensure that your overlay DIV appears in front of all objects instead of behind them. Note the class's visibility value is "hidden" -- this makes the DIV invisible when the page loads.

  • Paste the following JavaScript code below the CSS code described in the previous step:

    <script language="javascript" type="text/javascript">

    function ShowOverlay(divID, xCoordinate, yCoordinate) {

    var divObject = document.getElementById(divID); = "visible"; = xCoordinate; = yCoordinate;



    This is the "ShowOverlay" function called when you click the button. It receives the DIV's ID and the "x" and "y" location coordinates passed by the button click event. The code then makes the DIV visible and moves it to the desired coordinates.

  • Save your document and view it in a browser. Click the "Click to Overlay Div" button. The DIV appears, moves to the coordinates specified in the code and overlays any object that appears beneath it on the Web page.

Tips & Warnings

  • When calling the "ShowOverlay," be sure to pass it the ID of your overlay DIV and the two "x" and "y" screen coordinates. You could call the function anytime, even after the page loads. Doing so causes your overlay to appear when a user first sees your page.
  • The DIV in this example contains text, but you can place any element you like inside the DIV tags. For instance, to overlay an arrow over some object on your page, find an image of an arrow and add its "Img" tag to the DIV. The arrow then moves to the desired page location when you call the JavaScript function.

Related Searches


  • Photo Credit Jupiterimages/Polka Dot/Getty Images
Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!