English 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。
通过使用divwith样式z-index:1;，position: absolute;您可以将其叠加div在其他任何样式上div。
z-index确定div堆栈的顺序。具有较高div的div z-index将出现在具有较低div的div的前面z-index。请注意，此属性仅适用于定位的元素。
以下是基于CSS的简单解决方案100％。“秘密”是display: inline-block在包装元素中使用。该vertical-align: bottom图像中是克服4像素填充，有些浏览器元素后添加一个黑客。
建议：如果包装器之前的元素是内联的，则它们最终可能会嵌套。在这种情况下，您可以使用display: block通常是好旧的容器将容器“包裹” div。
.wrapper {
display: inline-block;
position: relative;
}
.hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 188, 212, 0);
transition: background-color 0.5s;
}
.hover:hover {
background-color: rgba(0, 188, 212, 0.8);
// You can tweak with other background properties too (ie: background-image)...
}
img {
vertical-align: bottom;
}<div class="wrapper">
<div class="hover"></div>
<img src="http://placehold.it/450x250" />
</div>新的Grid CSS规范提供了更为优雅的解决方案。使用position: absolute网格可能会导致重叠或缩放问题，而Grid可以使您免受脏CSS黑客的攻击。
最小的网格叠加示例：
的HTML
<div class="container">
<div class="content">This is the content</div>
<div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>
的CSS
.container {
display: grid;
}
.content, .overlay {
grid-area: 1 / 1;
}
而已。如果您不是为Internet Explorer构建的，则您的代码很可能会工作。
#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。
我既不是CSS的编码员也不是专家，但是我在Web设计中仍在使用您的想法。我也尝试过不同的解决方案：
当然，它们两个周围都有包装纸。您可以控制菜单div的位置，该菜单div的左边距和顶部位置将显示在标题div中。您也可以根据需要将div菜单设置为浮动。