1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <title>Web page</title>
5 </head>
6 <body>
7 <div id="overlay">
8 </div>
9 <div id="originalDiv">
10 </div>
11 </body>
12 <style>
13 #overlay {
14 width: 100px;
15 height: 100px;
16 background-color: red;
17 z-index: -1;
18 position:absolute;
19 top:50px;
20 left:50px;
21 }
22
23 #originalDiv {
24 width: 100px;
25 height: 100px;
26 background-color: blue;
27 z-index: 1;
28 position:absolute;
29 top:0px;
30 left:0px;
31 }
32 </style>
33</html>
34
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="utf-8">
5<title>CSS Overlaying One DIV over Another DIV</title>
6<style>
7 .container{
8 width: 200px;
9 height: 200px;
10 position: relative;
11 margin: 20px;
12 }
13 .box{
14 width: 100%;
15 height: 100%;
16 position: absolute;
17 top: 0;
18 left: 0;
19 opacity: 0.8; /* for demo purpose */
20 }
21 .stack-top{
22 z-index: 9;
23 margin: 20px; /* for demo purpose */
24 }
25</style>
26</head>
27<body>
28 <div class="container">
29 <div class="box" style="background: red;"></div>
30 <div class="box stack-top" style="background: blue;"></div>
31 </div>
32</body>
33</html>