WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to Overlay One DIV Over Another DIV using CSS

Topic: HTML / CSSPrev|Next

Answer: Use the CSS z-index Property

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute, fixed, or relative).

Let's try out the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Overlaying One DIV over Another DIV</title>
<style> 
    .container{
        width: 200px;
        height: 200px;
        position: relative;
        margin: 20px;
    }
    .box{
        width: 100%;
        height: 100%;            
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.8;  /* for demo purpose  */
    }
    .stack-top{
        z-index: 9;
        margin: 20px; /* for demo purpose  */
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box" style="background: red;"></div>
        <div class="box stack-top" style="background: blue;"></div>
    </div>
</body>
</html>

In the example above, the div element with the class .stack-top will be on top of another div.

See the tutorial on CSS position, to learn more about CSS positioning methods.


Related FAQ

Here are some more FAQ related to this topic:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties