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.

Related Searches


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


You May Also Like

  • 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...

  • 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...

  • 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....

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!