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:

<div class="navi"></div>

<div id="infoi">

    <img src="info_icon2.png" height="20" width="32"/>

</div>

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 rightmost side and centered on top of the div.navi.

Answer 1

Try this code:

#container {

  width: 100px;

  height: 100px;

  position: relative;

}

#navi,

#infoi {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

}

#infoi {

  z-index: 10;

}

<div id="container">

  <div id="navi">a</div>

  <div id="infoi">

    <img src="info_icon2.png" height="20" width="32" />b

  </div>

</div>