How to overlay one DIV over another div using CSS
In this tutorial, we are going to see how to overlay one DIV over another div using CSS. You can use the CSS position property in combination with the z-index property to overlay a DIV on top of another DIV element. The z-index property determines the order of positioned elements (i.e. elements whose position value is absolute, fixed or relative).
Let’s try the following example to see how it works:
CSS Code:
.parent { position: relative; width: 300px; height: 300px; margin: 10px; } .child1 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.7; background: red; } .child2 { z-index: 1; margin: 30px; background: green; }
HTML Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Overlay one DIV over another div using CSS</title> <style> /* Put the CSS Style Here */ </style> </head> <body> <div class="parent"> <div class="child1"></div> <div class="child1 child2"></div> </div> </body> </html>
Result |
---|
|