[解決済み】あるdivの上に別のdivを重ねる方法

質問

1つの個体の重ね合わせについて教えてください div 別の個体の上に div .

私のコードはこんな感じです。

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

残念ながら div#infoi または img は、最初の div.navi .

これは、2つの別々の div を配置する方法を教えてください。 div#infoi の上に div.navi の一番右側で、中央に配置されます。 div.navi .

解決方法は？

#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="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div>

について学ぶことをお勧めします。 position: relative と子要素で position: absolute .