How to Make One DIV Behind Another in HTML


In HTML coding, DIV elements create distinct sections of content on a Web page. Developers use DIVs in various ways, sometimes hiding or stacking content until a certain action occurs, such as the user clicking on a link. You can use a combination of HTML and Cascading Style Sheets (CSS) to create DIV elements and then put one behind the other, thanks to a CSS property called "z-index." As long as you set the "position" property of each DIV in your CSS code, you can then add a "z-index" value to stack the DIVs behind one another.

  • Write HTML code for a DIV element and put whatever content you want inside the opening <div> and closing </div> tags. Assign the DIV an ID attribute to name the DIV element. You should pick a name that is unique from any other DIV element and do not use the same ID more than once on the same Web page. Here's an example:

    <div id="firstdiv">Content goes here...</div>

  • Create a second DIV below the first one and then add whatever content you wish to that DIV. Give this DIV an ID attribute with a different name than the first.

    <div id="seconddiv">Content goes here...</div>

  • Open your CSS file or locate the <style> tags between the <head> tags in the HTML file you are coding. You can add <style> tags if they are not already present. Use CSS code to give each DIV a position type of "relative," as shown in this example:

    firstdiv {position: relative;}
    seconddiv {position: relative;}
  • Add the "z-index" property to the CSS code for each DIV element. Set the value of "z-index" higher for the DIV that stacks on top of the other. The lowest DIV in the stack gets the lowest "z-index" value.

    firstdiv {position: relative; z-index: 2;}
    seconddiv {position: relative; z-index: 1;}

    You can set the "z-index" value between zero and 999. You can use negative values but they may cause problems in complex layouts and don't work in older versions of Internet Explorer.

Tips & Warnings

  • Always back up your original HTML and CSS files before editing them.


  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet


You May Also Like

  • HTML Div Styles

    The DIV tag defines a division or section of an HTML document and used to apply styles to a group of elements....

  • How to Make DIV Scroll With a Page Using CSS

    When designing your website, you may have a specific DIV container that you want to remain visible to your visitors at all...

  • How to Make Notepads

    Notepads are handy items to have around, but commercially made products can be expensive. You can quickly and easily make your own...

Related Searches

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