如何覆盖另一个div的一个div
希望有人能够提供帮助，但我需要帮助，将一个个人div覆盖在另一个div 。
我的代码如下所示：
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
不幸的是，我不能在第一个div.navi嵌套div#infoi或img 。
它必须是两个独立的div ，如图所示，但我需要知道如何将div#infoi放在div.navi ，并放在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> 通过使用样式为z-index:1;的div z-index:1; 和position: absolute; 你可以将你的div覆盖在任何其他div 。
z-index决定div'堆栈'的顺序。 具有较高z-index的div将出现在具有较低z-index的div前面。 请注意，此属性仅适用于定位元素 。
公认的解决方案效果很好，但国际海事组织对其为什么没有解释。 下面的例子归结为基础知识，并将重要的CSS与不相关的样式CSS分开。 作为奖励，我还包括了CSS定位如何工作的详细说明。
TLDR; 如果您只需要代码，请向下滚动至结果 。
问题
有2个独立的兄弟元素，目标是定位第二个元素（ id为infoi ），使其出现在前一个元素（具有navi类的元素）中。 HTML结构无法更改。
建议的解决方案
为了达到预期效果，我们将移动或定位第二个元素，我们将其称为#infoi以便它出现在第一个元素中，我们将其称为.navi 。 具体来说，我们希望#infoi位于.navi右上角。
CSS职位所需知识
CSS有几个定位元素的属性。 默认情况下，所有元素都是position: static 。 这意味着元素将根据HTML结构中的顺序进行定位，只有少数例外。
其他position值是relative ， absolute和fixed 。 通过将元素的position设置为这3个值中的一个，现在可以使用以下4个属性的组合来定位该元素：
top right bottom left 换句话说，通过设置position: absolute ，我们可以添加top: 100px来定位页面顶部的元素100px。 相反，如果我们设置bottom: 100px ，元素将位于页面底部100px。
这里是许多CSS新手丢失的地方 - position: absolute有一个参照系。 在上面的例子中，引用的框架是body元素。 position: absolute与top: 100px指元件被定位100px从顶部body元件。
引用的位置框架或位置上下文可以通过将父元素的position设置为除position的任何值来更改position: static 。 也就是说，我们可以通过给父元素创建一个新的位置上下文：
position: absolute; position: relative; position: fixed; 例如，如果一个<div class="parent">元素被赋予position: relative ，那么任何子元素都会使用<div class="parent">作为它们的位置上下文。 如果一个子元素被赋予position: absolute和top: 100px ，则该元素将位于距<div class="parent">元素顶部100px处，因为<div class="parent">现在是位置上下文。
另一个要注意的因素是堆栈顺序 - 或者元素如何堆叠在z方向上。 这里必须知道的是，元素的堆栈顺序默认情况下是通过它们在HTML结构中顺序的相反来定义的。 考虑下面的例子：
<body>
<div>Bottom</div>
<div>Top</div>
</body>
在本例中，如果两个<div>元素位于页面上的相同位置，则<div>Top</div>元素将覆盖<div>Bottom</div>元素。 由于HTML结构中的<div>Top</div>出现在<div>Bottom</div> ，因此它具有更高的堆叠顺序。
div {
position: absolute;
width: 50%;
height: 50%;
}
#bottom {
top: 0;
left: 0;
background-color: blue;
}
#top {
top: 25%;
left: 25%;
background-color: red;
}<div id="bottom">Bottom</div>
<div id="top">Top</div>