html - How to overlay one div over another div

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

My code looks like this:

Unfortunately I cannot nest the div#infoi or the img, inside the first div.navi.

It has to be two separate divs as shown, but I need to know how I could place the div#infoi over the div.navi and to the right most side and centered on top of the div.navi.

Answer

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;

  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

  
a
  

    b

  

I would suggest learning about position: relative and child elements with position: absolute.