How to overlay one div over another div

Question

I need assistance with overlaying one individual div over another individual div.

My code looks like this:

Answer 1

You need to add a parent with a relative position, inside this parent you can set the absolute position of your divs

 <------Relative
  
 <------Absolute
  
 <------Absolute
  
 <------Absolute

Final result:

https://codepen.io/hiteshsahu/pen/XWKYEYb?editors=0100

  
TOP: I am at Top & above of body container
  
    
CENTER: I am at Top & in Center of body container
  
  
BOTTOM: I am at Bottom & above of body container

    

Set HTML Body full width

 html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

After that, you can set a div with the relative position to take full width and height

.container {
  position: relative;
  background-color: blue;
  height: 100%;
  width: 100%;
  border:1px solid;
  color: white;
  background-image: url("https://images.pexels.com/photos/5591663/pexels-photo-5591663.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-color: #cccccc;
}

Inside this div with the relative position you can put your div with absolute positions

On TOP above the container

.header {
  position: absolute;
  margin-top: -10px;
  background-color: #d81b60 ;
  left:0;
  right:0;
  margin:15px;
  padding:10px;
  font-size: large;
}

On BOTTOM above the container

.footer {
  position: absolute;
  background-color: #00bfa5;
  left:0;
  right:0;
  bottom:0;
  margin:15px;
  padding:10px;
  color: white;
  font-size: large;

}

In CENTER above the container

.center {
  position: absolute;
  background-color: #00bfa5;
  left:  30%;
  right: 30%;
  bottom:30%;
  top: 30%;
  margin:10px;
  padding:10px;
  color: white;
  font-size: large;
}