如何将一个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。