如何将一个 div 覆盖在另一个 div 上 [英] How to overlay one div over another div

问题描述

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

我的代码如下:

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

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

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

解决方案

#container {宽度:100px；高度:100px；位置:相对；}#导航，#信息{宽度:100%；高度:100%；位置:绝对；顶部:0；左:0；}#信息{z-索引:10；}

<div id="navi">a</div><div id="infoi"><img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32"/>b

我建议学习 position:relative 和带有 position: absolute 的子元素.

I need assistance with overlaying one individual div over another individual div.

My code looks like this:

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

Unfortunately I cannot nest the div#infoi or the img, inside the first div.navi.

It has to be two separate divs as shown, but I need to know how I could place the div#infoi over the div.navi and to the right most side and centered on top of the 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>

I would suggest learning about position: relative and child elements with position: absolute.

这篇关于如何将一个 div 覆盖在另一个 div 上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！