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:
Example
Try this code »<!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:
