html - 如何将一个div覆盖在另一个div上

Question

在将一个单独的 div 覆盖在另一个单独的 div 上时，我需要帮助。

我的代码如下所示:

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

不幸的是，我无法将 div#infoi 或 img 嵌套在第一个 div.navi 内。

如图所示，它必须是两个单独的 div，但我需要知道如何将 div#infoi 放在 div.navi 位于 div.navi 的最右侧并居中。

Answer 1

#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 的子元素。