Displaying one div on top of another

Answer 1

To properly display one div on top of another, we need to use the property position as follows:

• External div: position: relative
• Internal div: position: absolute

I found a good example here:

.dvContainer {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

.dvInsideTL {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 100px;
  background-color: #ff751a;
  opacity: 0.5;
}

  

    

      
Top Left
      
Top Right
    
    

      
Bottom Left
      
Bottom Right
    
  
  

  

I hope this helps,
Zag.